移动端弹窗用 absolute 居中失败主因是父容器未设 relative 定位、视口单位异常或滚动缩放干扰；可靠方案为 absolute + top/left 50% + transform: translate(-50%, -50%)，并确保父容器为 relative 或改用 fixed 定位。
移动端弹窗用 position: absolute 居中失败，通常是因为没正确处理视口单位、父容器定位上下文，或忽略了移动端的缩放/滚动影响。用 transform: translate(-50%, -50%) 配合 top: 50%; left: 50% 是可靠方案，但需满足几个关键前提。
确保父容器是相对定位的视口容器
绝对定位元素的偏移基准是最近的已定位祖先元素（即 position 为 relative、absolute 或 fixed）。如果父级没设 position: relative，它可能相对于 body 或 html 计算，而这些在移动端常因滚动、缩放或 iOS Safari 的 viewport 行为导致 top/left 偏移不准。
- 给弹窗最外层容器（比如
.modal-wrapper）加position: relative - 更稳妥的做法：让弹窗直接相对于
body定位，同时设置body { position: relative }（注意不要影响原有布局） - 避免把弹窗放在高度不定、有
overflow: hidden或transform的父容器里——这些会创建新的包含块，干扰 50% 计算
使用 transform 居中的标准写法（必须成对出现）
仅写 top: 50%; left: 50% 只是把元素左上角移到中心；必须配合 transform: translate(-50%, -50%) 才真正居中自身。
-
错误写法：
top: 50%; left: 50%; transform: translateX(-50%)（只水平居中） -
正确写法：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 建议加上
max-width: 90vw; max-height: 90vh;防止弹窗超出屏幕，尤其小屏 iPhone
适配 iOS Safari 滚动时的视觉错位
iOS Safari 在页面滚动时，position: fixed 和部分 absolute 元素可能出现“粘滞”或偏移。虽然这里用的是 absolute，但如果 body 正在滚动，且弹窗父容器未脱离文档流，仍可能抖动。
立即学习“前端免费学习笔记（深入）”；
- 弹窗显示时，给
body加overflow: hidden，阻止背景滚动（同时记录 scrollTop，隐藏时恢复） - 为防 Safari 渲染延迟，可加
will-change: transform提升图层 - 避免在弹窗上使用
height: 100vh—— iOS Safari 的 vh 在地址栏展开/收起时会变化，推荐用min-height: 100dvh（支持现代浏览器）或 JS 动态设置
补充：更健壮的替代方案（无需依赖父容器）
如果仍不稳定，可改用 position: fixed 直接相对于视口定位，这是移动端更推荐的方式：
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)- 加
inset: 0（CSS Logical Properties）配合margin: auto实现居中（需现代浏览器支持） - 搭配
z-index确保层级高于其他内容，iOS 上建议设为z-index: 1000+
