margin: auto 在 absolute 元素上垂直居中需同时满足：父容器设 position: relative、top/bottom 均指定、元素高度为定值；缺一不可，否则浏览器无法计算可用空间。
因为 margin: auto 在 position: absolute 元素上垂直方向不生效，根本原因不是写法错，而是浏览器压根没机会算——它缺“上下边界”和“固定高度”这两个硬条件。
absolute 元素的 margin: auto 不是开关，是方程
浏览器对 margin: auto 的垂直计算，依赖一个明确的“可用空间”：父容器高度减去元素自身高度，再除以 2。但这个减法必须有确定的被减数和减数：
-
top和bottom必须同时存在（比如都设为0），否则垂直方向无约束，浏览器连“父容器给它留了多少高度”都不知道 -
height必须是具体值（如120px），不能是auto、fit-content或未确定的百分比——内容撑开的高度无法参与静态减法 - 只写
top: 0; left: 0; margin: auto？水平也不居中，因为right缺失，水平方向同样无剩余空间可分
父容器没设 position: relative 是最常漏的锚点
即使你把 top/bottom/left/right 全设成 0，宽高也写死了，margin: auto 还是可能飘到视口中心——因为父容器没设 position: relative，导致定位上下文回退到 根元素。
- 这个
position: relative不是为了“让父容器变定位”，而是为了提供一个可靠的定位锚点 - 中间某层祖先意外加了
position: relative？子元素会相对于它定位，而不是你写的 flex 父容器，调试时极难察觉 -
transform（如scale）在部分浏览器中也会干扰定位参考系，进一步放大定位偏差
Flex 容器里混用 absolute 和 margin: auto 是自相矛盾
只要子元素加了 position: absolute，它就彻底退出 flex 布局链：justify-content、align-items、margin: auto 全部失效。这不是 bug，是规范行为。
- flex 布局靠算法分配空间，
absolute靠坐标手动控制位置——两者底层机制冲突 - 误以为“父容器是 flex，子元素就能用 flex 对齐”，实际是设计意图打架：想语义化居中，又因遮罩、气泡等场景强行加
absolute - 此时
margin: auto被浏览器静默忽略，开发者工具里能看到声明，但毫无视觉变化
真正卡住调试的地方，往往不是代码写错了，而是那个看似可选的 position: relative 漏了，或者四边偏移没写全——margin: auto 在 absolute 场景下不是“启用即居中”，而是一组必须全部满足的约束条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
