弹性盒子布局flex居中

在弹性盒子布局（flex布局）中，要实现居中对齐可以使用以下属性和值的组合：
1. 设置父容器的属性为flex，并将justify-content属性的值设置为center。这将使子元素在主轴上水平居中对齐。
2. 如果需要在交叉轴上垂直居中对齐，可以将align-items属性的值设置为center。这将使子元素在交叉轴上垂直居中对齐。
3. 如果有多个子元素需要居中对齐，可以将父容器的属性设置为flex，并在子元素上使用margin:auto来平分剩余空间。这将使子元素在主轴上均匀分布并居中对齐。

综上所述，要实现弹性盒子布局（flex布局）的居中对齐，可以使用justify-content: center来在主轴上水平居中对齐，也可以使用align-items: center来在交叉轴上垂直居中对齐。同时，可以使用margin:auto来使多个子元素在主轴上均匀分布并居中对齐。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [详细记录CSS中flex布局各属性的使用，快速掌握flex的居中等效果](https://blog.csdn.net/weixin_48456678/article/details/121663730)[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_1"}}] [.reference_item style="max-width: 50%"]
- *2* [css补充2：flex布局，居中方案等](https://blog.csdn.net/CYL_2021/article/details/124307811)[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_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]