[分享]css中如何让图片高度居中显示

在CSS中，让图片高度居中显示是一件相对简单的事情。通常，我们可以使用以下两种方法：/ 方法一：使用flex布局 / .container { display: flex; / 将容器设置为flex布...

在CSS中，让图片高度居中显示是一件相对简单的事情。通常，我们可以使用以下两种方法：

/* 方法一：使用flex布局 */
.container {
  display: flex; /* 将容器设置为flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.container img {
  height: 100%; /* 限制图片高度为父元素高度 */
}

/* 方法二：使用定位 */
.container {
  position: relative; /* 将容器设置为相对定位 */
}
.container img {
  position: absolute; /* 将图片设置为绝对定位 */
  top: 50%; /* 将图片上边框距离容器顶部的距离设置为50% */
  transform: translateY(-50%); /* 将图片向上移动自身高度的一半 */
} 

在以上代码中，我们使用了flex布局和定位两种方法来让图片高度居中显示。需要注意的是，这两种方法都是将图片的高度设置为与父元素相等，并在垂直方向上进行居中。其中，flex布局适用于父元素宽度不为100%的情况，而定位适用于父元素宽度为100%的情况。