[分享]css两张图片并列垂直居中

CSS 中两张图片并列垂直居中是一个常见的问题，以下是一些解决方案:

/* 第一种方法: 使用 display: table-cell 和 vertical-align: middle */

.container {
  display: table;
  height: 300px;
}

.container img {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}

/* 第二种方法: 使用绝对定位和 transform */

.container {
  position: relative;
}

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

两种方法的原理都是让两张图片所在的容器垂直居中，所以需要设置容器的高度和 display: table 或 position: relative。然后，通过 display: table-cell 或 position: absolute 让图片参与垂直居中的计算，再设置 vertical-align: middle 或 transform: translateY(-50%) 实现垂直居中。