css实现垂直居中

在 CSS 中实现垂直居中有几种方式，这里列举几种常用的方法：

1. 使用 display: flex 和 align-items: center：

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

这种方法需要父元素设置为 flex 布局，子元素设置为 align-items: center 即可实现垂直居中。

2. 使用 position: absolute 和 top: 50%：

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这种方法需要将子元素设置为绝对定位，然后使用 top: 50% 将其移动到父元素正中间，最后使用 transform: translateY(-50%) 将其上移一半的高度，即可实现垂直居中。

3. 使用 position: relative 和 margin: auto：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

这种方法需要将父元素设置为相对定位，将子元素设置为绝对定位，然后将 top、left、right、bottom 四个属性都设置为 0，最后使用 margin: auto 将其垂直居中即可。

上面的三种方法都可以实现垂直居中的效果，可以根据实际情况选择合适的方法使用。