flex布局，元素垂直居中

Flexbox布局，全称为Flexible Box Layout，是一种现代CSS布局模型，它允许网页开发者更容易地创建灵活、响应式的布局。通过设置容器(display属性为flex)以及一些相关的flex属性，比如align-items, justify-content等，我们可以轻松控制容器内元素的排列、对齐和尺寸调整。

对于元素垂直居中，可以使用以下几种方法：

1. align-items: center - 如果容器本身设置了display:flex，那么默认情况下，它的内容会在主轴方向上居中。例如：

   .container {
     display: flex;
     align-items: center;
     justify-content: center; /* 或者只设这一条，水平居中 */
   }

2. 使用vertical-align: middle - 这适用于行内元素，但需要配合line-height设置才能达到期望效果，如：

   .vertically-centered {
     vertical-align: middle;
     line-height: normal;
   }

3. position 和 transform: translate() - 对于绝对定位元素，可以将元素往上偏移自身高度的一半：

   .vertically-centered {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
   }