css中怎样让图片上下居中显示

在 CSS 中，让图片上下居中是一个常见的需求。下面介绍几种实现方法。

/* 方法一：使用 CSS3 的 transform 属性 */
.centered {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
} 

这种方法需要将图片设置为 position: absolute; 或者 position: fixed; 并将其父元素设置为 position: relative;。然后通过设置 top: 50%; 将图片的顶部调整到父元素的中间位置，再使用 transform: translateY(-50%); 将图片的中心位置上移一半的高度，即可让图片上下居中。

/* 方法二：使用 flexbox */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
img {
  max-width: 100%;
  max-height: 100%;
} 

这种方法需要将图片的父元素设置为 display: flex; 并设置 align-items: center; 和 justify-content: center;，即可让图片在父元素中上下左右居中。同时需要将图片的宽度和高度设置为 max-width: 100%; 和 max-height: 100%;，保证图片大小不超过父元素的大小。

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

这种方法需要将图片的父元素设置为 display: table;、height: 100%; 和 width: 100%;。然后将图片的 display 属性设置为 table-cell; 并使用 vertical-align: middle; 即可让图片在父元素中上下居中。