margin: auto在absolute元素上仅当top/right/bottom/left全为0、宽高固定、父容器有position:relative时才生效；否则退化为margin:0，元素贴左上角。
margin: auto 在 position: absolute 元素上能居中，但不是“默认生效”，而是必须同时满足三个硬性条件：四边偏移全为 0、宽高明确固定、父容器有定位上下文。缺一不可，否则它就退化成 margin: 0，元素死贴左上角。
为什么只写 margin: 0 auto 不行
这是最常踩的坑——margin: 0 auto 只控制左右外边距，对垂直方向完全无作用；而 absolute 元素的垂直位置由 top/bottom 决定，不参与 margin 分配逻辑。浏览器根本不会去算 margin-top 和 margin-bottom 的值。
- 写了
margin: 0 auto却没设top和bottom→ 垂直方向无约束，元素卡在默认top: auto（即文档流原位置）或top: 0 - 只设
left: 0; right: 0; margin: auto→ 水平能居中，但垂直仍无效，因缺少top/bottom成对约束 - 想靠它“自动推导”居中？浏览器不是 AI，它需要确定的方程解：四边围出空间，再减去自身尺寸，才能均分剩余量
margin: auto 居中的三要素必须全部到位
它不是开关，是计算结果。只有当浏览器能精确回答“上下剩多少、左右剩多少”时，margin: auto 才会真正分配像素值。
-
top: 0; right: 0; bottom: 0; left: 0必须全部写出，漏一个（比如没写bottom: 0）→ 垂直方向无边界，计算直接跳过 -
width和height必须是明确值：200px、50%（父容器尺寸已知时）、fit-content不行，auto更不行 - 父容器必须有定位上下文：
position: relative/absolute/fixed，否则top/bottom会回退到视口，居中结果飘到屏幕中央而非容器内
和 transform: translate(-50%, -50%) 的关键区别
两者都能视觉上居中，但机制完全不同，选错会影响布局行为。
立即学习“前端免费学习笔记（深入）”；
-
margin: auto是布局阶段计算，元素仍参与父容器尺寸计算（例如父容器用width: fit-content包裹它，会把 margin 空间也算进去） -
transform是渲染后偏移，元素已脱离布局流，不影响父容器尺寸，但可能意外触发新层叠上下文或影响z-index -
margin: auto在 IE11 及更早版本中不支持四向零坐标方案；transform要求 IE10+（IE9 需-ms-transform）
最容易被忽略的隐性条件
代码看着简洁，落地时往往栽在看不见的地方。
- 父容器用了
display: flex，但没加position: relative→ 子元素按视口定位，居中失效 - 子元素写了
max-width: 400px却没设width→ 浏览器认为宽度不明确，拒绝触发margin: auto计算 - CSS 预处理器里漏写了
bottom: 0，编译后样式缺失，但开发者容易误以为是 margin 问题反复调试 - 图片等替换元素虽自带尺寸，但若父容器
overflow: hidden且未设position: relative，margin: auto居中后可能被裁剪
真正难的不是写那几行 CSS，而是确认所有隐性前提都成立——尤其是那个看似装饰性的 position: relative，它不是可选项，是定位锚点。漏了它，整个计算链就断了。
