css中如何让图片高度居中

在网页开发中，我们经常需要让图片垂直居中，这里介绍几种方法。

一、使用Flexbox布局

.container {
  display: flex;
  align-items: center;
}
.container img {
  max-height: 100%;
  width: auto;
} 

通过设置容器为flex布局，使用align-items属性将子元素垂直居中。同时，使用max-height: 100%和width: auto来保证图片按照比例缩放。

二、使用position和transform

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

这种方法比较经典，通过将图片的位置设置为绝对定位，然后使用top: 50%将图片垂直居中。最后通过transform: translateY(-50%)来调整图片的位置，使其真正处于中心位置。

三、使用vertical-align

.container {
  line-height: 150px;
  text-align: center;
}
.container img {
  vertical-align: middle;
} 

通过设置容器的line-height为图片高度，然后将text-align属性设置为center来使图片水平居中。最后使用vertical-align: middle将图片垂直居中。

以上三种方法可以根据需要选择使用，也可以根据浏览器兼容性选择。无论哪种方法都可以让图片高度垂直居中。