margin: auto 在 absolute 元素上垂直不生效，因缺少 top/bottom 成对约束及明确宽高，无法计算剩余空间；需四边归零+固定尺寸才生效，否则退化为 0。
因为 margin: auto 在 position: absolute 元素上根本不会自动计算垂直方向的值，除非你手动把它“逼”进一个可解的空间里——它不是开关，是方程，缺条件就无解。
absolute 元素上 margin: auto 垂直不生效的根本原因
浏览器对 margin: auto 的垂直分配，依赖于明确的“上下可用空间”。而 position: absolute 元素脱离文档流后，垂直方向没有天然基准；top 和 bottom 不成对出现时，浏览器无法推导出高度约束，也就无法算出“该给 margin-top 和 margin-bottom 各分多少像素”。这不是 bug，是 CSS 规范的确定行为。
-
top: 0; left: 0; margin: auto→ 水平也不居中，因right缺失，水平方向同样无剩余空间 -
top: 0; bottom: 0; width: 200px; height: 100px; margin: auto→ 才会触发垂直 + 水平均分 - 哪怕写了
top: 0; right: 0; bottom: 0; left: 0，但width或height是auto，margin: auto仍被忽略
top/bottom/left/right 必须全设为 0 才行
这组四值不是为了“归零”，而是为了在父容器内划出一个封闭的定位参考框。只有这个框完整，浏览器才能把父容器尺寸减去元素自身尺寸后的差值，当作可分配的“剩余空间”。
- 漏掉
bottom: 0？垂直方向无约束，margin: auto对margin-top/margin-bottom完全不计算 - 只写
top: 0; left: 0？左右/上下都无边界，margin: auto直接退化为margin: 0 - 父容器没设
position: relative？top/bottom/left/right会回退到视口，居中结果飘到屏幕中央，而非容器内
宽高必须是明确值（不能是 auto 或百分比）
margin: auto 居中需要浏览器能精确知道元素尺寸，才能从“四边围出的空间”里减出剩余量。任何依赖运行时内容撑开或相对计算的尺寸，都会让这个减法失败。
- ✅
width: 300px; height: 150px; - ❌
width: auto; height: auto;（文字长度变化就失效） - ⚠️
width: 80%; height: 60vh;—— 百分比和vh算“明确值”，但前提是父容器尺寸已知且稳定；若父容器本身是display: flex且未设position: relative，百分比可能按视口解析
比起 margin: auto，transform: translate(-50%, -50%) 更值得优先用
它不依赖四边归零、不要求宽高固定、也不怕父容器 overflow: hidden 裁剪。真正容易被忽略的，是那个看似无关的 position: relative —— 它不是装饰，是定位锚点。漏了它，top: 50% 就会以视口为基准，而不是你期望的父容器。
- 写法：父容器加
position: relative，子元素写top: 50%; left: 50%; transform: translate(-50%, -50%) - 兼容性：IE10+ 支持，加
-ms-transform可覆盖 IE9 - 副作用：
transform会创建新层叠上下文，可能影响z-index层级或overflow行为
复杂点不在代码怎么写，而在所有隐性条件是否闭环：父容器有没有 position: relative、四边偏移有没有漏写、宽高是不是真“明确”、甚至预处理器编译后有没有意外删掉某一行 —— 这些地方一松动，margin: auto 就安静地退回左上角，连警告都不报。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
