HTML中如何实现图片的垂直居中

在HTML中，要实现图片的垂直居中，可以使用CSS的Flexbox或Grid布局。以下是两种方法的示例代码：

方法1：使用Flexbox

HTML:

<div class="container">
  <img src="path/to/your/image.jpg" alt="Sample Image">
</div>

CSS:

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如果也需要水平居中的话 */
  height: 200px; /* 设置容器的高度 */
}
 
.container img {
  max-width: 100%; /* 确保图片不会超出容器 */
  max-height: 100%; /* 确保图片不会超出容器 */
}

方法2：使用Grid

HTML:

<div class="container">
  <img src="path/to/your/image.jpg" alt="Sample Image">
</div>

CSS:

.container {
  display: grid;
  place-items: center; /* 水平垂直居中的简写 */
  height: 200px; /* 设置容器的高度 */
}
 
.container img {
  max-width: 100%; /* 确保图片不会超出容器 */
  max-height: 100%; /* 确保图片不会超出容器 */
}

在这两种方法中，.container 是一个包裹图片的容器，它的高度被设置为200px。align-items 或 place-items 属性确保图片垂直居中。如果还需要水平居中，可以添加 justify-content 或 place-items 的水平对齐属性。