HTML 中心图像垂直引导 - Html

在 HTML 中，有时需要垂直居中图像或其他元素。这篇介绍将教你如何使用 HTML 和 CSS 来实现垂直居中图像。

使用 Flexbox

使用 Flexbox 是最简单的方式来垂直居中元素。将父级容器设置为 display: flex，并设置 align-items 和/或 justify-content 属性即可实现：

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

在这个示例中，.container 是包含要垂直居中的图像的 div 元素。

使用绝对定位

另一种方式是使用绝对定位。需要将图像的样式设为：

img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这会将图像垂直居中，但需要注意，这只会在父级容器有固定高度的情况下才有效。

使用 表格

另一种方式是使用表格。将父级容器设置为 display: table，并将图像和另一个 div 容器各设置为 display: table-cell。然后将另一个 div 容器的 vertical-align 属性设置为 middle。

.container {
  display: table;
}

.image-container,
.content-container {
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="image-container">
    <img src="path/to/image.jpg" alt="垂直居中图像">
  </div>
  <div class="content-container">
    这里放置其它内容...
  </div>
</div>

以上就是三种垂直居中图像的方式，你可以根据具体情况选择最合适的方法。