CSS 如何水平和垂直居中图片

在本文中，我们将介绍如何使用CSS将图片水平和垂直居中显示在一个div中。

阅读更多：CSS 教程

方法一：使用 flexbox

Flexbox 是一种强大的CSS布局模型，可以轻松实现水平和垂直居中图片。要使用这种方法，我们需要将图片和包含它的div元素放入一个父级容器中，并应用以下样式：

.parent-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.child-container {
  text-align: center;
}

.child-container img {
  display: inline-block;
}

在这个例子中，我们使用 display: flex 将父级容器设置为flex布局。通过设置 justify-content: center 属性，图片将水平居中；通过设置 align-items: center 属性，图片将垂直居中。

方法二：使用绝对定位和负边距

另一种常见的方法是使用绝对定位和负边距来将图片居中。首先，我们需要将图片所在的div元素设置为相对定位，然后将图片设置为绝对定位并应用以下样式：

.parent-container {
  position: relative;
}

.child-container img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

使用这种方法，我们将 top、left、right 和 bottom 的值都设置为0，并将图片的外边距设置为 auto。这样就可以将图片水平和垂直居中。

方法三：使用 transform 属性

transform 是CSS3中的一个功能强大的属性，可以实现各种转换效果，包括缩放、旋转和平移。我们可以使用 transform: translate() 来将图片居中。以下是具体代码：

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

在这个例子中，我们将图片的定位设置为相对定位，并使用 top 和 left 将图片的左上角移动到其父级容器的中间位置。然后，通过使用 transform: translate(-50%, -50%) 将图片向左和向上移动其自身宽度和高度的一半，从而将图片水平和垂直居中。

方法四：使用表格和表格单元格

这种方法的思路是使用表格布局将图片居中。首先，我们将图片和其容器包装在一个表格中，并设置表格和表格单元格的宽度和高度为100%。以下是具体代码：

.parent-container {
  display: table;
  width: 100%;
  height: 100%;
}

.child-container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

在这个例子中，我们将包含图片的div元素以及其父级元素都设置为表格布局。通过将 display: table 应用于父级容器和 display: table-cell 应用于子容器，我们可以将图片水平和垂直居中。