css如何让图片居中显示文字
1、创建一个父层div，定位为position:relative；
2、创建img和span标签；
3、img宽高为父级元素宽高；
4、span定位为position:absolute，并设置left和top为50%，再设置margin为宽高的一半实现居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="position:relative;width:100px; height:100px;
border:1px solid #ccc; text-align:center;">
<img src="./css3.jpg-600" width="100" height="100">
<span style="width:48px; height:12px; line-height:12px;
position:absolute; top:50%; left:50%;
margin-left:-24px; margin-top:-6px;">
居中文字
</span>
</div>
</body>
</html>
主要思想：用定位方式定位水平垂直居中。比较简单的实现方式，仅提供参考。
更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！
以上就是css如何让图片居中显示文字的详细内容，更多请关注0133技术站其它相关文章！
