margin: auto在普通文档流中垂直方向恒为0，因css 2.1规范强制规定margin-top/margin-bottom为auto时计算值为0，旨在避免父高依赖子边距导致的循环依赖；水平方向则因有父宽基准可算剩余空间而生效。
因为浏览器在普通文档流中根本不会计算垂直方向的 margin: auto，它被规范强制设为 0 —— 不是没写对，是压根不参与计算。
普通块级流里 vertical margin: auto 恒为 0
这不是 bug，是 CSS 2.1 规范（Section 10.6.3）白纸黑字写的：margin-top 或 margin-bottom 为 auto 时，其“used value”就是 0。原因很实在：避免死循环。
- 父元素高度默认由子内容撑开（
height: auto） - 而
margin: auto垂直居中又得先知道父容器“剩下多少高度”才能分 - 这就成了“先有鸡还是先有蛋”——浏览器干脆不让你算，直接归零
为什么水平方向却能 work？
水平方向有天然基准：块级元素默认占满父容器宽度，只要子元素设了明确 width，左右剩余空间就可确定，margin: 0 auto 才能均分。
-
margin: 0 auto→ 左右外边距均分可用宽度 -
margin: auto 0→ 等价于margin: auto 0 auto 0，上下仍为 0 - 哪怕父容器有
height: 400px，只要子元素是height: auto，垂直auto依然不触发
absolute + margin: auto 垂直居中要四条件全齐
它不是“让 margin: auto 变强了”，而是把它塞进一个能解方程的上下文里。
- 父容器必须有
position: relative（否则定位锚点飘到视口） - 子元素必须同时写全
top: 0; bottom: 0; left: 0; right: 0 - 子元素
width和height必须是具体值（200px、50%可以，auto或fit-content不行） - 漏掉
bottom: 0？垂直方向无约束，margin: auto直接失效
flex 容器里 margin: auto 的作用机制完全不同
它不是“自动算边距”，而是“吞掉交叉轴剩余空间”。别当成通用居中开关。
- 默认
flex-direction: row时，margin: auto吞的是垂直方向（Y 轴）剩余空间 - 若子元素被
align-self: stretch（默认）或flex-grow: 1拉满，则无剩余空间可吞，margin: auto失效 - 父容器必须有明确高度（如
min-height: 100vh），否则交叉轴没“空隙”概念 -
justify-content: center和margin-left: auto冲突——前者会覆盖后者
真正容易被忽略的复杂点，不在语法本身，而在于那个看似可选的 position: relative。它不是装饰，是整条定位链的锚点；一旦漏掉，top: 50%; transform: translate(-50%, -50%) 这类方案也会飘出容器边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
