[分享]css中如何文字在图片中居中显示

使用CSS实现文字在图片中居中显示对于一张图片，在图片上方或下方添加文字是非常普遍的。但是，如果希望文字准确地居中显示在图片上，该怎么做呢？本文将介绍如何使用CSS实现文字在图片上居中显示。首先，我们...

使用CSS实现文字在图片中居中显示
对于一张图片，在图片上方或下方添加文字是非常普遍的。但是，如果希望文字准确地居中显示在图片上，该怎么做呢？本文将介绍如何使用CSS实现文字在图片上居中显示。
首先，我们需要设置图片的父级元素为相对定位，这样我们才能在其中绝对定位文字。代码如下：

.parent {
  position: relative;
} 

接下来，要让文字在水平和垂直方向上均居中显示在图片中，我们需要设置文字的绝对位置，并使用transform属性来使其水平和垂直居中。代码如下：

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

从代码中可以看出，我们首先将文字的绝对位置设置为距离父级元素顶部和左侧各50%，这样就将文字放置在图片中心。接着，使用transform属性将文字向上和向左移动，使其实现水平和垂直居中。
完整示例代码如下：

.parent {
  position: relative;
}

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

在HTML中，我们可以用p标签来放置需要居中的文字，并用img标签来引用图片。如下所示：

<div class="parent">
  <img src="example.jpg">
  <p class="child">这是一段需要居中的文字</p>
</div> 

通过以上CSS实现的设置，这段需要居中的文字就会完美地显示在图片中心啦！