css将图片居中显示文字

CSS 可以让我们轻松地将图片居中显示，同时还能在图片上加上文字。下面我们就来看一下具体的方法。

img {
  display: block;
  margin: 0 auto;
}

.container {
  position: relative;
}

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

首先，我们需要先确定要居中的图片。将该图片的 display 属性设置为 block，这样它就会独占一行而不是和其他内容并排在一起。接着，将其 margin 属性设置为 0 auto，这样它就会在容器的水平中心处居中显示。

接下来，我们需要在图片上叠加文字。为了实现这一点，我们需要将容器的 position 属性设置为 relative，这样在容器内部创建的绝对定位元素才能以该容器为基准。然后，我们再创建一个绝对定位的元素，将其 position 属性设置为 absolute，top 和 left 属性设置为 50%（即使它们超出了容器的边界），并使用 transform 属性将其向左和向上平移 50%（即其自身宽度和高度的一半），这样就可以将文字放在图片的中心位置了。

这样图片就居中了，同时还加了一些文字覆盖在上面。我们只需要将要显示的文字放在这个绝对定位的元素内就可以了。记得为这个元素添加类名或 ID，以便准确地定位它。