移动端弹窗全屏居中应使用position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%)，该方案不依赖固定宽高、适配动态内容与系统缩放，且兼容主流移动浏览器。
移动端弹窗在各种屏幕都居中，核心就一条：用 position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%)，别碰 margin-top: -height/2 或 JS 计算偏移。
为什么不能用 relative + absolute + 负 margin
负 margin 方案要求你提前知道弹窗的宽高，而移动端设备尺寸、DPR、字体缩放、系统 UI（如 iOS 底部手势条）都会影响实际渲染尺寸。一旦内容动态加载或字体加载后重排，margin-top 就会错位——尤其在 iOS Safari 下，vh 单位本身就不稳定，更别说靠它算出固定值再取负。
- 常见错误现象：
top: 50%+margin-top: -200px在 iPhone 15 Pro 上刚好看准，换到 iPad mini 或安卓折叠屏就明显偏下 - 必须同时设
width和height才能算 margin，但响应式弹窗往往用max-width、max-height和fit-content，负 margin 直接失效 - 系统级字体放大（如 iOS「更大字体」设置）会让文字撑高，但负 margin 不会自动调整
fixed + transform 是唯一不依赖尺寸的方案
transform: translate(-50%, -50%) 的计算基于元素自身的渲染后尺寸，浏览器在绘制时实时取值，不是写死的像素数。哪怕弹窗里插入一段长文本、图片异步加载完成、甚至触发 font-face 加载导致重排，视觉中心点始终不变。
- 必须用
position: fixed（不是absolute），否则滚动页面时弹窗会跟着动 - 不需要父容器设
position: relative——fixed的参考系是视口，不是某个父级 - 兼容性没问题：iOS Safari 9.3+、Android Chrome 42+、微信内置浏览器（X5 内核）均支持
transform二维偏移 - 注意：别把
transform写在span或img上，IE9 对 inline 元素无效；弹窗主体务必用div包裹
max-width/max-height 和 overflow 处理要配合 viewport
光居中还不够，弹窗内容在小屏上不能溢出、在大屏上不能太窄。关键不是硬写 width: 320px，而是用相对单位加边界控制：
立即学习“前端免费学习笔记（深入）”；
-
max-width: 90vw：比80%更可靠，vw始终相对于视口宽度，不受父容器 padding 或 zoom 影响 -
max-height: 80vh：但 iOS Safari 的vh在地址栏收起/展开时会跳变，稳妥做法是补一层overflow-y: auto，并确保内部内容有自然高度（比如用min-height: min-content） - 避免
height: 100%或height: 100vh——某些安卓 WebView 会把状态栏高度也算进vh，导致底部被遮住 - 如果弹窗含表单输入框，iOS 键盘弹出会压缩视口，此时
vh值突变；transform居中不受影响，但max-height可能变小，所以一定要设overflow-y: auto
z-index 和 backdrop 层级容易被忽略
移动端弹窗常配半透明遮罩（backdrop），但 z-index 在 iOS Safari 中对 fixed 元素有特殊规则：如果 backdrop 和 modal 都是 fixed，且没显式声明 z-index，部分旧版 Safari 会按 DOM 顺序渲染，导致遮罩盖不住弹窗。
- backdrop 必须设
z-index: 1040，modal 主体设z-index: 1050（Bootstrap 5 的通用值，够用且留余量） - 不要用
z-index: 9999—— 微信小程序 WebView、某些安卓定制内核会截断超大值 - 确保
body没有transform、filter或will-change，否则会创建新层叠上下文，让 z-index 失效 - backdrop 的
background推荐用rgba(0,0,0,0.5)，别用hsla或渐变——部分低端安卓机渲染慢，拖慢弹出动画
真正难的不是写对那四行 CSS，而是意识到：移动端没有“统一屏幕”，只有“此刻正在渲染的视口”。居中不是算出来的，是浏览器实时对齐出来的——所以所有依赖静态尺寸的方案，在真实设备上都会漏掉至少一种场景。
