唯一能同时应对宽高未知、内容动态、响应式缩放的居中方案是 top: 50% + left: 50% + transform: translate(-50%, -50%) 且父容器设 position: relative；仅 top/left 50% 仅移动左上角，导致偏移；缺 position: relative 会使定位参考系错位至 body 或视口；transform 必须合并书写以防覆盖；无真正轻量替代，该方案兼容 IE9+ 且仅触发 repaint 和 composite，不引发 reflow。
用 top: 50% + left: 50% + transform: translate(-50%, -50%)，且父容器必须设 position: relative —— 这是唯一能同时应对宽高未知、内容动态、响应式缩放的方案。
为什么只写 top: 50% 和 left: 50% 不行？
它只是把元素左上角（border-box 原点）拉到父容器中心点，不是让整个元素视觉居中。结果就是元素整体偏右下，尤其在字体加载延迟、文字换行、图片异步渲染后更明显。常见错误是调试时看到“差不多”，上线后一换内容就飘走。
必须补上 transform: translate(-50%, -50%)：浏览器会实时按元素当前渲染出的宽高计算偏移量，不依赖 CSS 中写的 width/height 值。
父容器没加 position: relative 会发生什么？
绝对定位元素会向上查找最近的“已定位祖先”。如果父 <div> 没设 position（即默认 static），它会一路跳到 <body> 或视口，导致居中参考系错位。滚动页面时，元素看起来像“粘在屏幕中间”，而不是固定在父容器里。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：给直接包裹它的父元素加
position: relative（哪怕其他样式为空） - 避免用
position: absolute或fixed作父容器——可能意外改变层叠上下文或触发滚动绑定 - 不要依赖
<body>自带定位——很多重置样式会删掉margin: 0，造成额外偏移
如果元素还要加动画或旋转，transform 怎么写才不崩？
所有 transform 声明必须合并到同一个属性里，否则后写的会完全覆盖前面的。比如先写了居中，再单独加 rotate(45deg)，居中就失效了。
推荐顺序：先写缩放/旋转等形变，最后写平移，语义更清晰：
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(2deg) translate(-50%, -50%);
}
注意：translate(-50%, -50%) 的百分比始终按元素自身宽高算，和是否旋转无关；但若父容器用了 transform-style: preserve-3d，需实测层叠效果，极少数情况下会影响定位参考系。
有没有更轻量的替代方案？
没有真正轻量的替代。用 margin-left: -150px 要求宽度固定，且每次改文案就得手动调；用 flex 则必须让子元素脱离文档流的需求消失——而绝对定位的核心价值恰恰是脱离文档流。
真正容易被忽略的是：这个方案在 IE9+ 全支持，性能上只触发重绘（repaint）和合成（composite），不引发重排（reflow），对频繁更新的内容（如实时加载提示）很友好。别为了省一行 CSS 冒险换方案。
