css 块级元素垂直居中

要将CSS的块级元素垂直居中，可以使用以下方法：

1. 使用flex布局：可以将父元素设为flex容器，然后使用justify-content和align-items属性将子元素在垂直和水平方向上都居中。

   .container {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }

2. 使用绝对定位和transform属性：可以将父元素相对定位，然后将子元素绝对定位，并使用transform属性的translate函数将子元素垂直居中。

   .container {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%;
     transform: translate(0, -50%);
   }

3. 使用表格布局：可以将父元素设为display: table，然后将子元素设为display: table-cell，并使用vertical-align属性将子元素垂直居中。

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

4. 使用grid布局：可以将父元素设为display: grid，并使用justify-items和align-items属性将子元素在垂直和水平方向上都居中。

   .container {
     display: grid;
     justify-items: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }

以上是实现CSS块级元素垂直居中的常见方法，可以根据具体需求选择合适的方式来实现。