css 图片垂直居中

在CSS中，有几种方法可以实现图片的垂直居中。以下是其中几种常用的方法：

1. 使用Flexbox布局：将图片的父元素设置为display: flex，并使用align-items: center属性来使图片在垂直方向上居中对齐。例如：

.container {
  display: flex;
  align-items: center;
}

2. 使用绝对定位和transform属性：将图片的父元素设置为相对定位（position: relative），然后将图片设置为绝对定位（position: absolute）。使用transform属性的translateY函数将图片向上移动50%的高度，并使用负值的margin-top属性将其居中。例如：

.container {
  position: relative;
}

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

3. 使用表格布局：将图片的父元素设置为display: table，并将其子元素设置为display: table-cell。然后使用vertical-align属性将图片在垂直方向上居中对齐。例如：

.container {
  display: table;
}

.image {
  display: table-cell;
  vertical-align: middle;
}

这些方法都可以实现图片在垂直方向上的居中对齐。根据具体的布局需求和兼容性要求，选择适合的方法即可。