css图片里的字怎么居中 |css切割的图片用于js

img {
position: relative;
display: block;
}
img:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上是居中的CSS代码，主要分为四个部分：

1. 设置图片为相对定位，才能让span元素相对于图片进行定位。

2. 在图片之前和之后分别添加一个伪元素，让它们的高度都等于图片的高度，并让它们在图片的同一行内并继承相同的居中方式。

3. 使用一个span元素包裹图片内的文字，并将其定位到图片的中心点。

4. 最后通过span元素的transform属性，让它相对于图片的中心点进行平移，从而实现文字的居中。

这样就可以很方便地让图片内的文字居中了。实现过程虽然有些繁琐，但只要熟练掌握，就能让网页设计更加完美。