绝对定位元素居中失效主因是父容器缺失定位上下文或未配合transform：必须设position: relative使top/left: 50%相对于父容器计算，再用transform: translate(-50%, -50%)将左上角锚点修正至几何中心。
绝对定位元素居中偏离，几乎全是定位上下文缺失或 transform 未配合到位导致的——不是代码写错了，而是参考系没对上。
父容器没设 position: relative 就直接用 top: 50%
这是最常踩的坑。浏览器会把 top: 50% 和 left: 50% 算在视口（viewport）上，而不是你写的那个 <div class="modal"> 里。
- 检查父容器 computed 样式里的
Containing Block，如果显示是initial containing block或body，说明它没成为定位上下文 - 给父容器加
position: relative（哪怕它本身不需要偏移），这是最安全的选择 - 避免用
position: static或不写position—— 这俩等价，都不构成定位上下文 - 别依赖
body作为参考：它的margin可能被重置样式清空，也可能被框架注入额外 padding，造成 1–2px 偏移
transform: translate(-50%, -50%) 单独写没效果
translate(-50%, -50%) 的百分比是按元素自身宽高算的，但它只“视觉位移”，不改变定位锚点。如果没先用 top: 50% 和 left: 50% 把左上角拉到父容器中心，那这个 translate 就是在原地晃悠。
- 必须成套使用：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 如果后续还要加
rotate()或scale()，全部写进同一个transform声明里，比如transform: rotate(10deg) translate(-50%, -50%) - 写两行
transform？后一行会完全覆盖前一行，居中立刻失效 - 移动端不用加
-webkit-transform前缀了，2026 年所有主流 WebView 都已原生支持
用了 margin: auto 却没居中
这个方案看着简单，但限制极多：它要求元素必须有明确的 width 和 height，且父容器得是定位上下文（position 不为 static）。
立即学习“前端免费学习笔记（深入）”；
- 写法必须是：
position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; - 子元素不能是
width: auto或width: 100%（除非父容器尺寸也固定） - 如果子元素内容动态（比如文字换行、图标加载延迟），
margin: auto会卡在初始渲染尺寸上，之后不再重算 - 和
transform方案混用？浏览器行为未定义，实际中会优先取transform，margin被忽略
真正难调的不是语法，而是“谁在参考谁”。每次居中失效，先打开开发者工具看 Containing Block，再确认 transform 是否被覆盖——这两步做完，90% 的偏离都能当场定位。
