父容器未设 position: relative 是弹窗错位主因；需配合 top: 50%、left: 50% 与 transform: translate(-50%, -50%) 实现居中；小屏下须用 max-width: 90vw 和 max-height: 80vh 防溢出；亚像素偏差属渲染特性，优先验证是否影响功能。
父容器没设 position: relative 是最常见原因
弹窗用 position: absolute 却始终偏左上角或随滚动错位，八成是父容器没加 position: relative。浏览器会向上找最近的已定位祖先，找不到就退到 body 或视口——而 body 往往有默认 margin、padding 或被重置样式干扰，导致“居中”变成相对于整个屏幕，不是你想要的弹窗容器。
- 检查开发者工具里该弹窗的
Containing Block是不是你预期的父div，而不是html或body - 哪怕父容器本身不需要偏移，也必须显式写
position: relative - 避免多层嵌套
position: relative，否则top: 50%的基准会逐级叠加，调试困难
transform: translate(-50%, -50%) 必须和 top: 50% + left: 50% 配套使用
单独写 transform: translate(-50%, -50%) 没用——它只是把元素自身向左上挪一半，但起点没定在父容器中心，结果就是“动了但没居中”。必须先用 top: 50% 和 left: 50% 把元素左上角钉到父容器中心点，再靠 translate 回拉。
- 完整声明缺一不可：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 如果同时用了
scale()或rotate()，必须合并进同一行transform，例如：transform: translate(-50%, -50%) scale(1.1); - 不要写两行
transform，后一条会覆盖前一条，居中直接失效
小屏下弹窗溢出或遮挡头部？max-width 和 calc() 得配合视口约束
绝对定位脱离文档流，width: 400px 在手机上可能撑出屏幕，transform 居中也救不了内容被裁切的问题。
- 给弹窗加
max-width: 90vw（不是100vw，留边防贴边） - 高度用
max-height: 80vh并配合overflow-y: auto，避免遮挡固定 header/footer - 若需更精细控制，可用
calc(50% - min(200px, 45vw))替代固定translate偏移，但实操中多数场景用max-width+vh更稳
亚像素渲染导致 1px 偏差？别硬纠，优先确认是否真影响体验
某些安卓 WebView 或旧版 Safari 对小数像素舍入策略不同，translate(-50%, -50%) 可能产生肉眼可见的 1px 漂移。这不是 bug，是渲染引擎特性。
立即学习“前端免费学习笔记（深入）”；
- 先确认偏差是否出现在所有设备，还是仅个别机型；如果是后者，大概率是亚像素问题
- 不建议为这点偏差改用
margin负值（得知道精确宽高）或calc()（维护成本高） - 真正要盯的是：滚动时是否持续偏移、是否影响点击区域——前者说明定位上下文错了，后者才是该修的
