margin: auto 在 flex 容器中能居中是因为它会吞噬主轴和交叉轴的剩余空间；前提是父容器为 flex 且子元素未设置 flex-grow/shrink，且交叉轴尺寸必须可计算。
margin: auto 在 flex 容器里为什么能居中
因为 margin: auto 在 flex 项目上会「吞噬」主轴和交叉轴上的剩余空间，而不是像在普通块级元素中那样只对水平方向生效。flex 布局下，auto margin 被赋予了明确的分配逻辑：它会把当前轴向上未被子项占据的剩余空间，全部塞进该方向的 margin 中。
必须满足的两个前提条件
缺一不可，否则 margin: auto 居中会失效：
- 父容器必须是
display: flex（或inline-flex） - 目标子元素不能设置
flex-grow或flex-shrink导致尺寸失控（尤其避免flex: 1或flex-grow: 1）
主轴 vs 交叉轴：margin auto 的行为差异
行为取决于容器的 flex-direction 和 align-items 设置：
- 当
flex-direction: row（默认）时：margin-left: auto; margin-right: auto实现**水平居中**；margin-top: auto; margin-bottom: auto实现**垂直居中**（前提是容器有明确高度且align-items不为stretch） - 当
flex-direction: column时：上下 margin auto 控制水平居中，左右控制垂直居中 -
margin: auto是简写，等价于同时设四个方向 —— 这正是它能同时搞定水平+垂直居中的原因
一个可靠居中的最小代码示例
.container {
display: flex;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 60px;
background: #4CAF50;
margin: auto; /* 同时吃掉水平和垂直剩余空间 */
}注意：这里 .container 必须有明确的 height，否则在 column 方向无法计算「剩余空间」；另外，如果 .item 设了 align-self: flex-start，就会覆盖 margin: auto 的垂直行为。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的是：flex 容器的交叉轴尺寸（比如 height）必须可计算，否则 margin: auto 在该轴上不生效 —— 它不是魔法，只是老老实实分剩余空间而已。
