[分享]css中怎么将div居中显示图片

在CSS中，如何将div居中显示图片呢？

方法一：使用text-align属性

我们可以将要显示图片的div的text-align属性设置为center，如下示例代码：

div {
  text-align: center;
}

img {
  /* 设置图片宽度，避免图片超出容器 */
  max-width: 100%;
}

这样就能将图片居中显示在div中了。

方法二：使用flex布局

我们可以使用flex布局，将要显示图片的div设置为display: flex，并设置justify-content属性的值为center，如下示例代码：

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  /* 设置图片宽度，避免图片超出容器 */
  max-width: 100%;
}

使用flex布局能够更加精确地控制图片居中显示的位置。

方法三：使用position和transform属性

我们可以将要显示图片的div设置为position: relative，然后将要显示的图片设置为position: absolute，并将其left和top属性的值都设置为50%，然后使用transform属性将其向左和向上移动图片自身宽度和高度的一半，如下示例代码：

div {
  position: relative;
  width: 300px;
  height: 200px;
}

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

这种方法可以将图片完美地居中显示在div中，适用性更广泛一些。

以上就是CSS中将div居中显示图片的三种方法，希望对大家有所帮助。