flex布局实现垂直居中

要使用 Flex 布局实现垂直居中，可以按照以下步骤操作：

1. 在父元素上应用 Flex 布局：将父元素的 `display` 属性设置为 `flex`。

.parent {
  display: flex;
}

2. 使用 `align-items` 属性将子元素垂直居中：设置父元素的 `align-items` 属性为 `center`。

.parent {
  display: flex;
  align-items: center;
}

3. 如果你希望子元素在主轴方向上居中，可以使用 `justify-content` 属性：设置父元素的 `justify-content` 属性为 `center`。

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

这样就可以实现子元素在父元素中垂直居中了。

注意：以上步骤适用于将单个子元素垂直居中。如果有多个子元素，你可以在父元素上使用 `flex-direction` 属性来设置主轴方向，然后通过调整子元素的布局来实现垂直居中。