display flex 垂直居中

`display: flex;` 属性用于创建弹性布局，它允许元素在容器内轻松地调整其大小和位置。如果你想让一个flex布局中的内容垂直居中，可以采用以下几种方法：

1. **justify-content: center;** 对于主轴（默认是左右方向），设置`align-items: center;`使得每一行的内容都会在交叉轴（垂直方向）上居中。

   .parent {
     display: flex;
     justify-content: center; /* 主轴水平居中 */
     align-items: center; /* 交叉轴垂直居中 */
   }

2. **使用Flexbox容器的特性**，如果你希望子元素相对于自身高度居中，可以将容器的高度设为`height: 100%;` 并添加`align-self: center;` 到特定元素上：

   .child-element {
     display: flex;
     align-self: center; /* 自身垂直居中 */
   }

3. **CSS Grid布局** 另外一种选择是使用CSS Grid，通过设置`align-self: center;`同样实现垂直居中，如果已启用Grid布局：

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