display: flex align-items: center

`display: flex` 是 CSS 布局模型中的弹性盒布局（Flexbox）模式，它允许您更轻松地创建响应式和动态布局。当你将一个元素的 `display` 属性设为 `flex` 时，该元素就会转换为一个弹性容器，它的子元素（称为 Flex 元素）可以沿主轴（默认为从左到右的方向）和交叉轴（垂直方向）进行排列。

`align-items: center` 是用于控制弹性容器（flex container）内的子元素在交叉轴（通常是垂直方向）上的对齐方式。当设置为 `center` 时，所有位于该容器内的非 `flex-start` 和 `flex-end` 的 Flex 子元素会被垂直居中对齐，无论它们的总高度是多少。

例如，考虑一个简单的网页布局：

<div class="container">
  <div class="item">这是内容</div>
</div>

.container {
  display: flex;
  justify-content: center; /* 主轴对齐方式 */
  align-items: center;     /* 交叉轴对齐方式 */
  height: 200px;
  background-color: lightblue;
}
.item {
  background-color: yellow;
  padding: 10px;
}

在这个例子中，`.item` 会在 `.container` 中垂直居中显示。