absolute元素上margin:auto垂直居中需同时满足：top/bottom全设为0、height明确、父容器有定位上下文，缺一则失效，否则浏览器无法计算剩余空间而退回到左上角定位。
absolute 元素上 margin: auto 垂直方向不生效的根本原因
不是浏览器 bug，也不是写法遗漏，而是 CSS 规范明确限定：margin: auto 在 position: absolute 元素上**只有在特定约束下才参与垂直计算**。它不自动“知道”该往哪居中，必须由开发者显式划定可分配空间的边界。
关键在于：垂直方向的 margin: auto 要起作用，浏览器必须能算出“上下还剩多少像素”。这个“剩余空间”只在 top 和 bottom 同时被设为具体值（如 0）时才存在。如果只设 top: 0、没设 bottom，浏览器就认为底部是开放的，高度不可知，margin 也就无从分配。
为什么只写 top: 0; left: 0; margin: auto 完全没反应
这是最常踩的坑——以为 margin: auto 是“一键居中”，结果元素死死贴左上角。其实它根本没触发任何自动计算，因为条件全不满足：
-
top和bottom没成对出现 → 垂直方向无剩余空间 -
left和right没成对出现 → 水平方向也无剩余空间 -
width或height是auto→ 浏览器无法确定元素尺寸，更没法均分 margin
四边全设为 0 就一定能居中？不一定
即使写了 top: 0; right: 0; bottom: 0; left: 0;，仍可能失败，原因往往藏在父容器里：
立即学习“前端免费学习笔记（深入）”；
- 父容器
position是static（默认值）→ 子元素会以视口为参考定位，居中结果偏移 - 父容器没设
height或min-height→bottom: 0失去参照，实际高度为 0，子元素被压缩成一条线 - 父容器有
overflow: hidden→ 四边归零后内容被裁掉，看起来“消失”了 - 子元素
width/height是百分比或fit-content→ 不算“明确值”，margin: auto直接忽略
比起 margin: auto，transform 更值得优先考虑
用 top: 50%; left: 50%; transform: translate(-50%, -50%) 几乎没有上述限制：
- 不要求宽高固定，文字长度变化、图片加载后撑开都 OK
- 不依赖父容器高度，也不怕
overflow: hidden裁剪 - 兼容性足够好（IE9+ 支持
-ms-transform） - 唯一硬性要求：父容器得有
position: relative（否则定位基准错乱）
真正容易被忽略的，是那个看似无关紧要的 position: relative —— 它不是可选装饰，而是整个定位链的锚点。漏了它，再正确的 transform 也会飘到视口中心去。
