margin: auto 在 absolute 元素上垂直方向强制为 0，水平居中需四边全设（如 top/right/bottom/left: 0）并指定宽高；更可靠方案是 top: 50%; left: 50%; transform: translate(-50%, -50%)，但父容器须有 position: relative。
margin: auto 在 absolute 元素上根本不会计算垂直值
浏览器对 margin: auto 的垂直方向（margin-top/margin-bottom）处理，遵循 CSS 2.1 规范第 10.6.3 节的硬性规定：只要这两个值是 auto，**最终使用的值就是 0**。这不是 bug，而是为避免布局死循环的强制设计——父元素高度依赖子元素内容撑开，子元素又想用父高度算 margin，逻辑闭环无法成立。
这个规则在普通文档流中就已生效；而 position: absolute 进一步切断了所有关联：元素彻底脱离流，不再参与父容器高度计算，也不再有“左右/上下剩余空间”这一概念。此时 margin: auto 失去全部计算依据，直接退化为 margin: 0。
- 常见错误现象：
.box { position: absolute; margin: 0 auto; }→ 水平也不动，Chrome 甚至静默丢弃该声明 -
text-align: center对它完全无效，因为它是作用于行内内容的，不是定位锚点 - 即使父容器设了
width和text-align，也改变不了这个事实
为什么只写 top: 0; left: 0; + margin: auto 不行
margin: auto 居中需要一个封闭的、可测量的“参考框”，而 top: 0; left: 0; 只定义了两个角，没告诉浏览器“右边在哪”“底边在哪”。水平方向缺 right，垂直方向缺 bottom，浏览器无法推导出可用空间，自然不触发 margin 分配。
- 必须四边全设：例如
top: 0; right: 0; bottom: 0; left: 0;—— 这不是为了归零，是为了围出一个与父容器等大的定位参考区域 - 但仅四边归零还不够：若
width或height是auto，浏览器仍无法从“围出的区域”里减出剩余量，margin: auto依然被忽略 - 父容器没设
position: relative？那四边归零会锚定到视口，居中结果飘到屏幕中央，而非你期望的容器内
更可靠的做法：用 top/left + transform 替代
top: 50%; left: 50%; transform: translate(-50%, -50%); 是目前最通用、容错率最高的方案。它不依赖宽高是否固定，不强求四边归零，也不怕父容器是 flex/grid/inline-block。
立即学习“前端免费学习笔记（深入）”；
-
top: 50%把元素左上角移到父容器垂直/水平中点 -
transform: translate(-50%, -50%)向左、向上各平移自身宽高的 50%，实现视觉中心对齐 - 关键前提：父容器必须有定位上下文，即至少设
position: relative；否则top: 50%会以视口为基准 - 注意：
transform会创建新层叠上下文，可能影响z-index层级或overflow: hidden的裁剪行为
容易被忽略的定位锚点问题
很多人加了 position: relative 还是不居中，真正卡住的往往不是代码本身，而是父容器的“存在感”太弱：
- 父容器高度为 0（比如内部全是
absolute或float子元素），表面看没框，但定位参考仍在 —— 建议临时加border: 1px solid red验证 - 父容器设置了
overflow: hidden，子元素明明居中了却只显示一半 —— 先改成visible排查 - 父容器上有
transform、filter或will-change，它们会隐式创建新的包含块，干扰预期定位层级
真正的难点不在写法，而在确认“定位参考是否如你所想那样存在”。
