CSS图片后字体居中显示 在网页设计中，我们通常会用到图片和文字的组合，这时候就需要考虑如何让文字居中显示在图片的后面。下面介绍一种用CSS实现图片后字体居中显示的方法。 首先，我们需要在HTML页面中添加一张图片，并在图片后面添加一个p标签，如下所示：

<div class="container">
<img src="example.jpg">
<p>这是一段文字</p>
</div>

接下来，我们为p标签添加CSS样式，让它居中显示在图片后面。

.container {
position: relative;
}
.container img {
display: block;
margin: 0 auto;
}
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
/* 调整字体的样式，包括颜色、阴影等 */
}

上面的代码中，我们给容器div设置了相对定位，使得图片和p标签的绝对定位具有了相对的位置基准。图片通过设置display:block和margin:0 auto属性让其居中显示，p标签通过设置position:absolute和top/left属性使其处于图片的正中央。translate(-50%, -50%)可以将p标签中心点与容器中心点对齐，实现居中效果。 最后，我们还可以通过添加text-shadow属性，让字体在图片后增加一些阴影效果，提高对比度和可读性。 仔细阅读上面的代码，再结合HTML中的示例代码，相信你已经掌握了如何实现CSS图片后字体居中显示的技巧。快去试试看吧！