css图片垂直居中 css中如何实现图片垂直居中

在 CSS 中，我们可以使用多种方法来实现图片的垂直居中。下面是完整攻略，包含了如何使用 CSS 实现图片垂直居中的过程和两个示例说明。

CSS 实现图片垂直居中

步骤一：使用 display:flex 和 align-items 属性

我们可以使用 display:flex 和 align-items 属性来实现图片的垂直居中。例如：

<div class="container">
  <img src="image.jpg" alt="Image">
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

img {
  max-width: 100%;
  max-height: 100%;
}

上述代码中，我们创建了一个名为“container”的 div 元素，并将其 display 属性设置为 flex。我们还将 align-items 属性设置为 center，以使图像垂直居中。我们还将 justify-content 属性设置为 center，以使图像水平居中。我们还将容器的高度设置为 300 像素。我们还将图像的 max-width 和 max-height 属性设置为 100%，以使其自适应容器大小。

步骤二：使用 position 和 transform 属性

另一种方法是使用 position 和 transform 属性来实现图片的垂直居中。例如：

<div class="container">
  <img src="image.jpg" alt="Image">
</div>

.container {
  position: relative;
  height: 300px;
}

img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100%;
  max-height: 100%;
}

上述代码中，我们创建了一个名为“container”的 div 元素，并将其 position 属性设置为 relative。我们还将容器的高度设置为 300 像素。我们还创建了一个名为“img”的 img 元素，并将其 position 属性设置为 absolute。我们还将其 top 属性设置为 50%，以使其垂直居中。我们还将其 transform 属性设置为 translateY(-50%)，以使其在垂直方向上向上移动其自身高度的一半。我们还将图像的 max-width 和 max-height 属性设置为 100%，以使其自适应容器大小。

示例说明

下面是两个示例，演示了如何使用 CSS 实现图片的垂直居中。

示例一：使用 display:flex 和 align-items 属性

<div class="container">
  <img src="https://via.placeholder.com/150" alt="Image">
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

img {
  max-width: 100%;
  max-height: 100%;
}

上述代码中，我们创建了一个名为“container”的 div 元素，并将其 display 属性设置为 flex。我们还将 align-items 属性设置为 center，以使图像垂直居中。我们还将 justify-content 属性设置为 center，以使图像水平居中。我们还将容器的高度设置为 300 像素。我们还将图像的 max-width 和 max-height 属性设置为 100%，以使其自适应容器大小。

示例二：使用 position 和 transform 属性

<div class="container">
  <img src="https://via.placeholder.com/150" alt="Image">
</div>

.container {
  position: relative;
  height: 300px;
}

img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100%;
  max-height: 100%;
}

上述代码中，我们创建了一个名为“container”的 div 元素，并将其 position 属性设置为 relative。我们还将容器的高度设置为 300 像素。我们还创建了一个名为“img”的 img 元素，并将其 position 属性设置为 absolute。我们还将其 top 属性设置为 50%，以使其垂直居中。我们还将其 transform 属性设置为 translateY(-50%)，以使其在垂直方向上向上移动其自身高度的一半。我们还将图像的 max-width 和 max-height 属性设置为 100%，以使其自适应容器大小。