Flex布局元素居中需父容器设display: flex，再用justify-content和align-items双属性控制主轴与交叉轴居中，且父容器须有明确高度（如height: 100vh），子元素避免margin: auto等干扰样式。
Flex布局中元素无法居中，通常是因为容器没设为flex、没启用对应方向的对齐属性，或子元素本身有干扰样式（比如固定宽高、margin、float等）。核心解法就是正确设置容器的 display: flex，再配合 justify-content（主轴）和 align-items（交叉轴）。
确保父容器是flex容器
这是前提。只给子元素设flex属性无效，必须作用在直接父容器上：
- 给父元素添加
display: flex（默认主轴为水平，即flex-direction: row） - 如果主轴是垂直方向（如列表项竖排），需显式加
flex-direction: column，此时justify-content控制垂直对齐，align-items控制水平对齐 - 避免父容器有
height: 0、overflow: hidden或塌陷导致高度不可见，影响垂直居中效果
用 justify-content 和 align-items 同时控制双轴居中
两者缺一不可：
-
justify-content: center—— 让子元素在主轴（默认水平）居中 -
align-items: center—— 让子元素在交叉轴（默认垂直）居中 - 合起来写就是：
justify-content: center; align-items: center; - 注意：这两个属性只对直接子元素生效，嵌套层级深时要逐层检查是否都设置了flex
常见干扰因素与排除方法
即使写了flex和居中属性，仍不居中？看看这些：
立即学习“前端免费学习笔记（深入）”；
- 子元素设置了
margin: auto—— 在flex中可能覆盖对齐行为，建议统一用flex属性控制，移除auto margin - 子元素有固定宽高且超出容器，或设置了
min-width/min-height导致挤压 - 父容器没有明确高度（尤其垂直居中时），浏览器无法计算交叉轴居中位置；可设
height: 100vh或其他具体值 - 用了
flex: 1或flex-grow的兄弟元素抢占空间，影响单个元素定位
快速验证模板（可直接复制测试）
以下是最小可用代码，确保居中有效：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 必须有高度才能垂直居中 */
}
.item {
width: 200px;
height: 100px;
background: #4a90e2;
} 
