html图片垂直居中

要在 HTML 中实现图片垂直居中，可以使用 CSS 的 flexbox 或者 absolute 定位来实现。以下是两种常用的方法：

方法一：使用 flexbox
HTML:

<div class="container">
  <img src="your_image_url" alt="Your Image">
</div>

CSS:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 设置容器高度，可以根据需要自行调整 */
}

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

方法二：使用 absolute 定位
HTML:

<div class="container">
  <div class="image-wrapper">
    <img src="your_image_url" alt="Your Image">
  </div>
</div>

CSS:

.container {
  position: relative;
  height: 100vh; /* 设置容器高度，可以根据需要自行调整 */
}

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

.image-wrapper img {
  max-width: 100%;
  max-height: 100%;
}

以上两种方法都可以实现图片在容器中垂直居中显示。可以根据实际需求选择其中一种方式进行使用。