绝对定位居中必须设父容器position: relative，否则top/left: 50%将相对于视口计算；推荐使用transform: translate(-50%, -50%)替代margin负值方案，因其响应式友好、无需固定宽高且性能更优。
绝对定位居中必须设父容器 position: relative
不加这句，top: 50% 和 left: 50% 就会相对于视口（viewport）计算，而不是你写的那个包裹盒子。滚动页面时元素会“飘走”，尤其在移动端或有自定义 body 样式的项目里特别明显。
常见错误是只给子元素写：.modal { position: absolute; top: 50%; left: 50%; }，却忘了父容器一句 position: relative。哪怕父容器本身不需要偏移，也得显式声明——static（默认值）不算“已定位”。
如果父容器是 body，更要小心：某些重置样式漏了 margin: 0 或 padding: 0，会导致参考点偏移。稳妥做法是单独建一个带 position: relative 的 wrapper div。
margin 负值方案只适用于宽高固定的元素
比如你知道弹窗宽 400px、高 200px，才可以用：
立即学习“前端免费学习笔记（深入）”；
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
width: 400px;
height: 200px;
}
但只要内容动态变化（文字换行、字体加载延迟、font-size 响应式调整），负值立刻不准。一旦宽高由 max-width、fit-content 或 JS 动态设置，这个方案就失效。
- 必须手动维护两个 magic number：
margin-top和margin-left - 修改尺寸时要同步改两处，容易遗漏
- 不支持百分比宽高（如
width: 80%）
transform: translate(-50%, -50%) 是更优解
它不要求宽高固定，浏览器实时按元素当前渲染尺寸计算偏移量，响应式友好，且不触发 layout（重排），只影响 paint（重绘）和 composite（合成），性能更好。
关键点：
-
top: 50%+left: 50%只把元素左上角钉到父容器中心点 -
transform: translate(-50%, -50%)才真正把视觉中心对齐 - 如果后续要加
rotate()或scale()，必须合并写进同一个transform声明，否则后写的会覆盖前写的
正确写法：transform: rotate(10deg) translate(-50%, -50%) 或 transform: translate(-50%, -50%) rotate(10deg)；错误写法：transform: translate(-50%, -50%); transform: rotate(10deg);。
水平居中可简化为 transform: translateX(-50%)
如果只需要水平居中（比如页脚按钮、顶部提示条），不用算高度，直接用 left: 50% + transform: translateX(-50%) 即可。省去 top 和垂直方向的计算，也避免因父容器高度未设导致的意外偏移。
注意：若父容器没设高度，top: 50% 仍可能无效，但这里根本不用它——translateX 只依赖自身宽度，完全独立。
真正容易被忽略的是：所有这些方案都依赖“最近的已定位祖先”。哪怕你写了十层嵌套，只要中间某层漏了 position: relative，整个链路就断了——浏览器会跳过它，往上继续找，直到 body 或视口。调试时建议用浏览器开发者工具逐层检查 computed styles 中的 position 值。
