最稳的居中方案是父容器设position: relative、子元素用top: 50%; left: 50%; transform: translate(-50%, -50%)，因absolute定位需最近已定位祖先，且translate基于自身实际尺寸计算，不依赖宽高预知，无回流，兼容性好。
最稳的方案是用 top: 50% + left: 50% 配合 transform: translate(-50%, -50%)，前提是父容器设了 position: relative。其他写法要么受限于宽高、要么依赖浏览器行为细节，容易在响应式或动态内容中失效。
为什么必须加 position: relative 到父容器？
因为 position: absolute 的定位参考系是「最近的已定位祖先元素」。如果父容器没设 position（即默认 static），浏览器会一直往上找，可能落到 body 或 html 上——弹窗就飞出视口，滚动时还会错位。
- 哪怕父容器只是个空包裹，也得显式写
position: relative - 它不改变布局流，只提供定位上下文，副作用几乎为零
- 遮罩层（如
.modal-overlay）建议用position: fixed，此时子弹窗的top: 50%才真正相对于视口中心
transform: translate(-50%, -50%) 比负 margin 可靠在哪？
负 margin 要求你提前知道元素渲染后的宽高，比如 margin: -60px 0 0 -120px。但字体缩放、换行、em/rem 单位、max-width 等都会让这个值失效；而 translate() 的百分比始终基于元素当前实际尺寸计算。
-
translate(-50%, -50%)是向左移动自身宽度的 50%，再向上移动自身高度的 50% - 支持文字、SVG、嵌套 flex 容器等任意内容，无需 JS 测量
- 不触发回流，性能优于修改
top/left或margin - IE9+ 全支持（IE9 需加
-ms-transform，但当前项目基本可忽略）
top: 0; bottom: 0; left: 0; right: 0; margin: auto 为什么常踩坑？
这个写法看似简洁，但隐性条件极多：子元素必须有明确的 width 和 height，否则多数浏览器会把它拉满整个父容器；内联内容（如纯文字）在垂直方向上甚至可能被忽略。
立即学习“前端免费学习笔记（深入）”；
- 一旦子元素宽高是
auto、fit-content或受min/max限制，居中立刻失效 - Flex/Grid 出来之前它很流行，但现在调试成本远高于
translate方案 - 它对父容器高度敏感：若父容器
height: auto且无内容撑开，top: 0等值仍会生效，但视觉上“没动”
真正要注意的只有两点：父容器加 position: relative（或 fixed），子元素写全 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)。其余写法不是卡尺寸就是赌浏览器兼容性，没必要为过时场景牺牲可维护性。
