html中图片怎样设置垂直居中

在HTML中，有时我们需要将图片垂直居中，以美观的方式展现内容。下面是一些方法，可以让您在HTML中轻松实现图片垂直居中。

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

.img-wrapper img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}

通过上述代码，我们可以实现将图片垂直居中。代码中的.flex 和 .center 都是利用了 flex 布局的特性来实现图片垂直居中，.img-wrapper 中设置了 display: flex，并设置了 align-items 和 justify-content 属性。

其中，align-items 属性用于设置元素在交叉轴上的对齐方式，通过将其设置为 center 实现了图片垂直居中；justify-content 属性用于设置元素在主轴上的对齐方式，同样设置为 center 实现了图片水平居中。

此外，我们还需要在 img 标签中设置 vertical-align: middle 属性，以保证图片内容垂直居中。

在实际编写中，我们可以将上面的代码直接拷贝到自己的 HTML 文件中。当需要垂直居中的图片出现时，我们只需要在HTML中引用这段代码即可。