根本原因是iOS Safari对transform: translate(-50%,-50%)的subpixel渲染敏感，高DPR屏下-50%计算易产生0.5px偏移；需确保父容器有非static定位、min-height:100dvh防高度为0，并避免margin:auto或right/bottom混用。
移动端绝对定位居中为什么总偏一点？
根本原因是 iOS Safari 对 transform: translate(-50%, -50%) 的 subpixel 渲染处理敏感，尤其在高 DPR 屏幕（如 iPhone 14 Pro 的 3x 屏）上，-50% 计算可能产生 0.5px 偏移，肉眼可见轻微右偏或下偏。这不是 bug，是像素对齐问题。
常见错误现象：top: 50% + left: 50% + transform: translate(-50%, -50%) 在开发时看着“差不多”，但真机测试发现浮层始终偏右下角；或者横竖屏切换后位置跳变。
- 必须确保父容器有明确的非-static 定位上下文（
position: relative或fixed），否则子元素会相对于 viewport 定位，再加 transform 也救不回来 - 避免用
right: 0; bottom: 0配合 translate —— 基准方向变了，计算逻辑混乱 - 如果父容器设置了
overflow: hidden，且子元素因 translate 稍微溢出，会被裁剪，看起来像“没居中”
宽高不确定时，transform 是唯一靠谱方案
别碰 margin: auto + 四边设 0：它要求子元素宽高明确（width/height 不能是 auto 或 fit-content），而移动端图标、提示框、加载动画等常依赖内容撑开尺寸，一换文案就崩。
transform: translate(-50%, -50%) 的百分比基于元素自身宽高，和父容器无关，所以：
立即学习“前端免费学习笔记（深入）”；
- 支持
width: max-content、height: fit-content、多行文本、动态 SVG 图标 - 不触发重排（reflow），滚动/动画更顺滑
- 现代浏览器硬件加速成熟，性能无负担
示例写法（安全可用）：
.overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 不需要 width/height，也不需要 margin 负值 */
}父容器高度为 0，top: 50% 就失效
这是移动端最隐蔽的坑：你写了 top: 50%，但父容器实际高度是 0，那 50% 就是 0px —— 元素直接贴顶。
典型场景：全屏遮罩用 <div class="modal"> 包裹，但 .modal 没设高度，只靠子内容撑开；或者用 body 作父容器，却忘了清除默认 margin 和设置最小高度。
- 首选解法：
min-height: 100dvh（Chrome 105+ / Safari 16.4+），它始终反映当前可视区域高度，不受地址栏收起/展开影响 - 兼容老版本：用 JS 注入真实高度：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，CSS 中写min-height: calc(var(--vh, 1vh) * 100) - 务必加
body { margin: 0 }，否则看似有高度，实则不可靠
IE8 或 WebView 旧内核必须回退怎么办？
现代项目基本不用考虑，但如果维护银行/政务类老系统，真有 IE8 流量或安卓 4.4 WebView，就得放弃 transform。
回退方案只有一条路：已知宽高 + 负 margin，且必须严格对应：
- 子元素必须声明固定
width和height（比如width: 80px; height: 60px） -
top: 50%+left: 50%后，margin-top必须是-30px（即-height/2），margin-left必须是-40px（即-width/2） - 单位必须统一（全用
px），混用rem和px会导致偏移
注意：这个方案在 width 或 height 改变时必须同步改 margin，不适合响应式内容。
