文字を中央寄せにしてもずれてしまう現象

画像のように、画像の上にテキストを貼りたいのですが、画像の真ん中に移動しようとしてもずれてしまいます。

画像はリストタグの中にあって、リストをpositittion :relativeにし、そのしたのテキストをabsoluteで設定しています。

html
1<div class="boxA">
2<h1>WORKS</h1>
3<div class="boxA-1">
4<div class="boxA-1-1">
5	<ul>
6		<li><img src="img/pic1.jpg"><div class="text">テキスト</div></li>
7		<li><img src="img/pic1.jpg"></li>
8		
9	</ul>
10</div>
11<div class="boxA-1-2">
12	BBBB
13</div>
14<div class="boxA-1-3">
15	CCC
16</div>
17<div class="boxA-1-4">
18	DDD
19</div>
20</div>
21</div>
22
23body {
24	margin: 0;
25	margin-right: auto;
26	margin-left: auto;
27	width: 70%;
28
29
30}
31
32h1 {
33	margin: 0;
34	text-align: center;
35	color: #fff;
36	padding-top: 20px;
37	padding-bottom: 20px;
38}
39
40.boxA {
41	background: #59676A;
42}
43
44.boxA-1:after {
45	content: "";
46	clear: both;
47	display: block;
48}
49
50.boxA-1-1 {
51	float: left;
52	width: 25%;
53}
54
55.boxA-1-2 {
56	float: left;
57	width: 25%;
58}
59.boxA-1-3 {
60	float: left;
61	width: 25%;
62}
63.boxA-1-4 {
64	float: left;
65	width: 25%;
66}
67
68.boxA-1-1 img {
69	object-fit: contain;
70	max-height: 100%;
71	width: 100%;
72	display: block;
73}
74
75.boxA-1 ul {
76	list-style: none;
77	margin: 0;
78	padding: 0;
79}
80
81.boxA-1-1 li:nth-of-type(1){
82	opacity: 0.8;
83
84}
85
86.boxA-1-1 li  {
87	position: relative;
88}
89.boxA-1-1 .text {
90	position: absolute;
91	top:50%;
92	left: 50%;
93	display: block;
94	color: #fff;
95	font-weight: bold;
96	width: auto;
97	background: red;
98}
99
100
101/*.text::after {
102	display: block;
103	content: "HELLOWORLD";
104	font-weight: bold;
105	background: blue;
106
107}*/
108
109.boxA-1-1{
110background: yellow;
111
112
113}
114.boxA-1-2{
115	background: green;
116}
117
118.boxA-1-3{
119	background: skyblue;
120}
121
122.boxA-1-4{
123	background: red;
124}
125

行動規範の内容に同意します

回答2件

ベストアンサー

画像の真ん中に移動しようとしてもずれてしまいます。

「.text」の基準値が左上になっていますので、「.text」自身の大きさ分（幅・高さ）を半分ずつ戻す必要があります。

css
1.boxA-1-1 .text {
2    position: absolute;
3    top:50%;
4    left: 50%;
5    display: block;
6    color: #fff;
7    font-weight: bold;
8    width: auto;
9    background: red;
10    transform: translate(-50%,-50%);　/* ← 追加  */
11}