flex 纵向布局 垂直居中

要实现flex纵向布局中的垂直居中，可以使用align-items属性。align-items属性用于设置子元素在侧轴（纵向）上的对齐方式。常见的取值有flex-start、flex-end、center、auto和stretch。其中，center表示居中对齐。例如，将父元素的align-items属性设置为center，子元素就会在纵向方向上居中对齐。以下是一个示例代码：

<style>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 其他样式属性 */
}

/* 其他样式属性 */

</style>

<div class="box">
  <!-- 子元素 -->
</div>

上述代码中，通过将父元素的align-items属性设置为center，实现了flex纵向布局的垂直居中效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [ReactNative布局样式大全](https://download.csdn.net/download/u010744618/9968843)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [flex布局以及实现垂直居中](https://blog.csdn.net/weixin_49519788/article/details/118093101)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]