html5图片垂直居中

要实现HTML5中的图片垂直居中，可以使用CSS中的flex布局。以下是一种示例代码：

HTML代码：

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

CSS代码：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px; /* 容器高度 */
}

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

在上面的代码中，我们将容器的高度设置为500px，然后使用flex布局将其内部的内容垂直和水平居中。图片使用max-width和max-height属性来保持其原始宽高比例，并将其大小限制在容器的可见区域内。通过这种方式，我们可以在HTML5中轻松地实现图片的垂直居中。