margin: auto在非Flex容器中垂直无效，因块级元素高度由内容撑开、无固定尺寸，浏览器无法计算上下剩余空间，故margin-top/bottom:auto恒为0；仅在Flex/Grid或绝对定位（四边为0且宽高固定）时才生效。
因为 margin: auto 在 Flex 布局里根本不是“自动算边距”，而是浏览器在 Flex formatting context 中赋予它的特殊语义：主动吞掉主轴和交叉轴上所有未被占据的剩余空间。
为什么非 Flex 容器里 margin: auto 垂直无效
块级元素在常规流中没有“垂直剩余空间”的概念——它的高度由内容撑开，父容器若没设 height 或 min-height，margin-top: auto 和 margin-bottom: auto 会被直接解析为 0。水平方向能生效，是因为块级元素默认占满父容器宽度（有明确可用空间），但垂直方向没有这个隐式约束。
常见错误现象：
- 写了
margin: auto却只水平居中、垂直不动 → 父容器大概率没设display: flex - 加了
min-height: 100vh还不垂直居中 → 忘了配display: flex，auto仍按老规则处理 - 设了
height: 100%但父级没高度 → 高度不可计算，垂直方向的auto直接失效
flex-direction 和 align-items 怎么影响 margin: auto
margin: auto 的生效轴向完全取决于容器当前的主轴/交叉轴定义，跟写法顺序无关。它不会“记住”你先写了 top 还是 left，只看 Flex 坐标系。
立即学习“前端免费学习笔记（深入）”；
当 flex-direction: row（默认）时：
-
margin-left: auto; margin-right: auto→ 水平居中 -
margin-top: auto; margin-bottom: auto→ 垂直居中（需容器有明确高度）
当 flex-direction: column 时：
-
margin-top: auto; margin-bottom: auto→ 水平居中 -
margin-left: auto; margin-right: auto→ 垂直居中
align-items: stretch（默认）会让子项在交叉轴拉伸填满容器 → 此时 margin-top: auto 等同于无效，因无剩余空间可吞。
为什么 margin: auto 比 justify-content + align-items 更可控
它不改变容器内布局流，只分配剩余空间；滚动条始终保留在容器边缘，不会被“挤走”或“覆盖”。而 justify-content: center + align-items: center 在子元素溢出时，会把整块内容居中摆放，导致首屏不可见区域变大，尤其在窄屏或缩放状态下更明显。
适用前提很明确：
- 父容器必须是
display: flex（或inline-flex） - 目标子元素必须是唯一直接子元素，或你明确只给它设
margin: auto - 不能同时设置
flex-grow、flex-shrink或flex-basis等干扰空间分配的属性 - 子元素宽高需明确（如
width/height、max-width，或内容本身有固有尺寸）
容易被忽略的兼容性细节
IE10–11 支持 margin: auto 居中，但仅限于主轴；交叉轴居中必须回退到 align-items: center。另外，如果子元素本身是 Flex 容器，margin: auto 仍有效，但要注意内层布局是否通过 align-items: stretch 或 flex: 1 抢占了空间——这种嵌套干扰比表面看起来更隐蔽。
