[分享]css不同图片自动垂直居中

CSS是网页设计中不可或缺的一部分，它可以实现很多不同的效果。其中一个常见的问题是如何将不同大小的图片在一个容器中自动垂直居中。下面介绍几种实现方法：方法一： .container { display...

CSS是网页设计中不可或缺的一部分，它可以实现很多不同的效果。其中一个常见的问题是如何将不同大小的图片在一个容器中自动垂直居中。下面介绍几种实现方法：

方法一：
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container img {
  max-height: 100%;
  max-width: 100%;
} 

使用Flex布局来实现自动垂直居中，可以兼容各种浏览器。使用max-height和max-width来限制图片大小。

方法二：
.container {
  position: relative;
}
.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

将容器设为相对定位，图片设为绝对定位，使用transform属性来调整定位达到垂直居中的效果。

方法三：
.container {
  display: table-cell;
  vertical-align: middle;
}
.container img {
  max-height: 100%;
  max-width: 100%;
} 

使用display属性将容器设为table-cell，同时使用vertical-align属性来实现垂直居中。同样使用max-height和max-width来限制图片大小。

以上几种方法都可以实现不同大小图片的自动垂直居中。在实际使用中可以根据具体情况选用最适合的方法。