Flexbox是CSS3中一种一维布局模型，专门用来处理容器内部子元素的排列与对齐。通过简单几个属性，就能让任意元素在父容器中水平垂直居中，而不必关心元素自身尺寸。
一、基础概念
使用Flexbox前，需要先将被居中元素的父容器设为弹性容器。核心属性包括：
- display: flex：定义弹性容器
- justify-content：控制主轴（默认水平）对齐
- align-items：控制交叉轴（默认垂直）对齐
二、单个元素的水平垂直居中
最常见场景是让一个盒子在页面正中间。只需父容器设置三个属性即可：
/* 父容器样式 */
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 300px;
border: 1px solid #ccc;
}
/* 子元素无需额外 margin 或定位 */
.box {
width: 100px;
height: 100px;
background: #f0f0f0;
}
对应的HTML结构
<div class="container"> <div class="box">内容</div> </div>
三、文本内容的居中
如果是纯文本，也可以直接对父容器使用Flexbox，文本会作为匿名弹性子项被居中：
.text-wrap {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
四、多个子元素的整体居中
当容器里有多个子项，且希望它们作为一个整体居中排列时，可配合flex-direction调整主轴方向：
.row-center {
display: flex;
flex-direction: row; /* 水平排列 */
justify-content: center;
align-items: center;
gap: 10px;
}
垂直排列多元素
.column-center {
display: flex;
flex-direction: column; /* 垂直排列 */
justify-content: center;
align-items: center;
}
五、使用 margin:auto 的替代方案
在Flex容器中，子项设置margin: auto也能占满剩余空间并自然居中：
.parent {
display: flex;
height: 250px;
}
.child {
margin: auto; /* 自动分配四周空间实现居中 */
}
六、注意事项
Flexbox在旧版浏览器需加前缀，如-webkit-box。另外，使用align-items: center时，若子项高度大于容器，内容可能被裁剪，可改用align-items: flex-start并加滚动。理解主轴与交叉轴的切换，是灵活使用Flexbox居中的关键。