margin: auto 无法垂直居中块级元素，因其在常规文档流中垂直方向无剩余空间可分配；仅在绝对定位（四边为0且宽高固定）或flex/grid容器中才有效。
因为块级元素在垂直方向没有“剩余空间”可分配，margin: auto 在常规文档流中对 margin-top 和 margin-bottom 的计算结果恒为 0。
块级元素的宽度和高度行为完全不同
浏览器对水平方向有天然约束：块级元素默认占满父容器宽度（即“一整行”），所以当它设了固定 width，左右就有明确的“剩余空间”，margin: 0 auto 才能均分；但垂直方向上，块级元素高度由内容撑开，height: auto 意味着“没上限也没基准”，浏览器根本不知道该从哪减、减多少，自然无法算出上下 margin。
- 父容器没设
height或min-height→ 子元素实际高度可能为 0 - 子元素
height是auto→ 垂直方向无固定尺寸，margin: auto被忽略 - 即使父容器有高度，只要子元素没显式设高，垂直居中逻辑就不会触发
absolute + top/bottom/left/right=0 是唯一让 margin:auto 垂直生效的常规场景
这不是 margin: auto 变强了，而是它被用在了一个脱离文档流、四边定位明确、宽高固定的上下文中。此时浏览器会把 top: 0; bottom: 0; left: 0; right: 0 留出的空间当作“可用余量”，再均分给 margin。
- 父容器必须有
position: relative（或其他非static值），否则absolute定位基准错乱 - 子元素必须同时声明
top、bottom、left、right且都为0，缺一个，垂直 margin 就不参与计算 -
width和height必须是具体值（如200px、50%），不能是auto或fit-content
Flex 容器中 margin:auto 能垂直居中，但机制完全不同
这不是传统块级流里的“自动计算”，而是 Flex 布局引擎把 margin: auto 解释为“吞掉主轴和交叉轴上的全部剩余空间”。它依赖的是容器主动计算出的空隙，不是元素自身尺寸推导。
- 父容器必须设
display: flex且有明确高度（如height: 400px或min-height: 100vh） - 子元素不能被
flex-grow: 1撑满，否则没剩余空间可吞 -
flex-direction决定哪条轴是主轴：默认row时，margin: auto同时吸走水平和垂直方向剩余空间 -
align-items: stretch（默认）会让子项在交叉轴拉伸——此时margin: auto失效
常见错误写法与对应现象
这些写法看着像在尝试垂直居中，实际都无效：
-
margin: auto→ 水平也不居中，因没指定上下/左右顺序，浏览器按四值语法解析为margin: auto auto auto auto，而垂直方向仍为 0 -
margin: auto 0→ 水平居中，垂直贴顶，因auto 0等价于margin: auto 0 auto 0，上下 margin 都退化为 0 -
margin: 0 auto→ 只水平居中，这是最常被误认为能垂直的写法 - 给
inline元素（如span）设margin: 0 auto→ 完全无效，margin: auto对行内元素无意义
真正要靠 margin: auto 实现垂直居中，只能选两种上下文：绝对定位（四边+宽高全固定）或 Flex/Grid 容器。其他任何组合，都是在和浏览器的盒模型规则硬扛——它不是 bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
