css在图片上让文字居中

CSS在图片上让文字居中是非常基础的一种操作，下面我们一起来看看如何实现。
首先，我们需要在HTML中插入一张图片，如下：

div class="content">
    img src="example.jpg">
    p class="caption">
    这是一张示例图片/p>
    /div>

其中，.content是图片所在的容器，可以通过设置position属性为relative来让文字相对于图片进行定位；.caption是图片的说明文字。

接下来，我们需要设置CSS样式来让文字居中。具体做法如下：

.content {
    position: relative;
}
.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    

解释一下上面的代码：首先，我们通过设置容器的position属性为relative来建立文字相对于图片的定位；接着，设置文字的position属性为absolute，然后通过top: 50%; left: 50%将文字的中心点对准图片中心；最后，通过transform: translate(-50%, -50%)将文字居中。

以上就是CSS在图片上让文字居中的实现方法，希望可以帮助大家。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！