css在图片上写文字居中 |手机界面设计css

.container {
position: relative;
}
.container img {
display: block;
}
.container span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上代码中，大家首先设置了一个父容器container，并将其设置为相对定位。然后，在该容器中放置了一张图片，将其设置为块级元素。最后，大家通过设置一个绝对定位的span元素，实现了文字的居中显示。

需要注意的是，span元素需要设置top和left属性，并使用transform属性将其水平和垂直方向上平移-50%。这里的-50%是相对于父容器container的宽度和高度的。

另外，在实际应用中，大家还可以使用其他的方法来实现文字在图片中的居中。比如，可以将文字作为一个块级元素，通过设置其宽度和高度，并且将其设置为相对定位，来实现在图片中居中显示。

总之，在实现文字在图片中的居中显示时，大家可以根据实际需求来选择不同的方法，最终达到大家想要的效果。