margin: auto 在 flex 容器中仅单轴生效，依赖剩余空间；无明确宽高或空间被占满时失效；稳妥居中应使用 justify-content 和 align-items。
flex 容器里 margin: auto 为什么有时不居中？
不是所有 flex 元素加 margin: auto 都能居中。它只在**单轴方向生效**，且依赖于容器的 flex-direction 和子项是否“有剩余空间”。比如 flex-direction: row 时，margin: auto 只影响水平方向（左右）；flex-direction: column 时，只影响垂直方向（上下）。如果父容器没设高度、子项又没设 flex: none 或固定尺寸，浏览器可能无法计算出“可分配的剩余空间”，margin: auto 就会失效。
最稳妥的居中写法：用 justify-content 和 align-items
这是专为 flex 居中设计的属性，语义清晰、兼容性好、行为可预测。只要父容器是 display: flex，就能直接控制子项在主轴和交叉轴的位置。
-
justify-content控制主轴（row是水平，column是垂直） -
align-items控制交叉轴（与主轴垂直的方向） - 两者都设为
center，就能实现真正的居中
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 注意：需要高度才能让 align-items 生效 */
}
margin: auto 真正适用的场景
它更适合“在可用空间内单独推某个子项到中间”，尤其当其他子项需要靠边或对齐时。比如导航栏里把 logo 居中，而菜单按钮分别贴左/右：
- 必须确保该子项是
flex: none或有明确宽高（否则可能被拉伸） - 父容器需有足够空间（不能被其他子项占满）
- 仅适用于单个子项——多个子项同时设
margin: auto会互相挤压，行为不可控
.nav {
display: flex;
}
.nav-logo {
margin: auto; /* 只这一项居中，左右菜单自动贴边 */
width: 120px;
flex: none;
}容易忽略的坑：高度缺失导致 align-items: center 失效
很多人写了 justify-content: center 和 align-items: center 却发现垂直方向没居中——大概率是父容器没有明确高度。flex 的交叉轴居中依赖容器在该轴上的尺寸。例如 flex-direction: row 时，交叉轴是垂直方向，所以父容器必须有 height（或 min-height），否则高度由内容撑开，align-items 就无从“居中”起。
立即学习“前端免费学习笔记（深入）”；
- 常见补救：加
height: 100vh、min-height: 100vh或用height: 100%（但需确保所有父级都有高度） - 移动端注意：
100vh在 iOS Safari 中可能因地址栏缩放产生偏差，可改用100dvh（支持较新） - 如果容器是
flex-direction: column，那就要关心宽度而非高度
