css如何实现图片垂直居中

CSS中实现图片垂直居中是很常见的需求，特别是在响应式网站中。下面将介绍两种实现方式。

/* 第一种方式：使用table和vertical-align属性 */.container {
      display: table;
}
img {
      display: table-cell;
      vertical-align: middle;
}

在这种方式中，我们将容器的display属性设为table，使其像一个表格。接着，将图片的display属性设为table-cell，让其表现得像一行中的单元格。最后，设置图片的vertical-align属性为middle，使其垂直居中。

/* 第二种方式：使用position和top属性 */.container {
      position: relative;
}
img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
}
    

在第二种方式中，我们设置容器的position属性为relative，使其成为相对定位容器。接着，将图片的position属性设为absolute，使其成为绝对定位元素。然后，设置图片的top属性为50%，将其移动到父容器中垂直方向的中心位置。最后，使用transform: translateY(-50%)属性将其向上移动50%，使其完全垂直居中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！