css的块进行垂直居中

实现CSS块级元素的垂直居中有多种方法，下面列举其中几个常用的方法：

1. 绝对定位和负边距：使用绝对定位将元素的顶部和左侧定位到父元素的中心，然后使用负边距将元素向上和向左移动一半的高度和宽度。

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
}

2. 绝对定位和transform：使用绝对定位将元素的顶部和左侧定位到父元素的中心，然后使用transform将元素向上和向左移动一半的高度和宽度。

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

3. 使用flexbox：使用flexbox将容器设为弹性盒子，并设置`justify-content`和`align-items`属性，将子元素垂直居中。

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

.box {
  width: 100px;
  height: 100px;
}

这些只是CSS块级元素垂直居中的常用方法，具体应用要根据需求选择。