uni-app学习：CSS之flex布局居中

最新推荐文章于 2026-06-10 11:26:51 发布

原创最新推荐文章于 2026-06-10 11:26:51 发布 · 置顶 · 2w 阅读

28 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #flex

收录于

uni-app 同时被 2 个专栏收录

18 篇文章

订阅专栏

css

6 篇文章

订阅专栏

本文详细介绍如何使用CSS的Flex布局实现元素的垂直居中和水平居中效果，包括不同方向上的居中方法，适用于前端开发人员快速掌握并应用到实际项目中。

1、上下居中（垂直居中）
style="height: 40px; 
background-color: #FFFFFF;
display: flex; 
flex-direction: row; 
align-items: center;"

2、左右居中（水平居中）
style="height: 40px; 
background-color: #FFFFFF; 
display: flex; 
flex-direction: row; 
justify-content: center;"

3、左右居中（水平居中）
display: flex;
flex-direction: column;
align-items: center;