css上下两个图片居中对齐

在网页设计中，很多时候需要把上下两个图片居中对齐。通常情况下，我们可以使用CSS来实现这一效果。下面是一段简单的CSS代码：

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

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

可以看到，这段代码主要是使用了flexbox来实现图片居中对齐。首先是使用display: flex来将包裹图片的父元素设置为flex容器。然后使用align-items: center和justify-content: center来使图片垂直和水平居中。 接着，我们还需要设置img元素的最大宽度和最大高度，并使用vertical-align: middle来使图片垂直对齐。

另外一个实现方法是使用position和transform属性，代码如下：

.parent {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

这段代码利用了position和transform属性来对图片进行定位和居中对齐。首先，我们将包裹图片的父元素设置position: relative。而图片本身则设置position: absolute，再使用top: 50%和left: 50%来将图片移动到父元素的中心位置。最后，使用transform: translate(-50%, -50%)来根据图片自身大小进行居中对齐。

无论是使用flexbox还是position和transform属性，都可以轻松地实现上下两个图片的居中对齐。根据实际情况，选择不同的方法即可。