最稳的移动端弹窗居中方案是position: fixed + transform: translate(-50%, -50%)，因top: 50%和left: 50%仅将左上角定在视口中心，必须用transform回拉自身宽高一半才能使中心对齐，且不受内容动态变化、键盘弹出或视口重算影响。
position: fixed + transform: translate(-50%, -50%) 是移动端弹窗居中最稳的结构，不依赖内容宽高、不卡滚动、兼容 iOS/Android 主流浏览器。
为什么不能只用 top: 50% 和 left: 50%
只写这两个值，弹窗左上角会落在视口中心点，整体偏右下。必须加 transform: translate(-50%, -50%) 才能让弹窗自身中心对齐。移动端尤其明显——内容加载后高度变化、键盘弹出导致视口重算，仅靠 top/left 会瞬间错位。
-
top: 50%和left: 50%定位的是元素左上角，不是中心 -
transform回拉的是元素自身的宽高比例，和渲染时机无关，比负 margin 更鲁棒 - 移动端 Safari 对
margin-top: -Xpx的计算在横竖屏切换时容易失准，translate不受影响
position: fixed 必须配全四边零值或明确尺寸
弹窗最外层容器（比如 <div class="modal">）要用 <code>position: fixed，但不能只写 top: 50% 和 left: 50% 就完事。要防止它被页面滚动影响，得显式控制定位基准：
- 推荐写法：
position: fixed; top: 0; left: 0; width: 100%; height: 100%—— 确保它撑满整个视口，不受 body 滚动干扰 - 如果弹窗本身内容区高度不确定，
height: 100%可能撑不开，此时改用min-height: 100vh更安全 - 别漏掉
body { margin: 0; }，否则默认 margin 会让100vh计算偏移
移动端 Safe Area 适配要手动加 env()
iPhone X 及之后机型有刘海和圆角，纯 bottom: 20px 会让弹窗卡在虚拟 Home Bar 上面。遮罩层或底部操作区需主动适配：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层（
.modal-overlay）建议：padding-bottom: env(safe-area-inset-bottom) - 弹窗内容区（
.modal-content）若带固定底部按钮，用padding-bottom: calc(20px + env(safe-area-inset-bottom)) - 不要对弹窗整体加
padding或margin来“模拟”安全区——它会破坏transform居中精度
Flex 布局在弹窗里慎用 align-items: center
很多人想用 Flex 把弹窗内容再居中一次，结果发现图片或按钮没动。问题常出在父容器没高度：
- 弹窗外层是
position: fixed，它已脱离文档流，height: 100%在没有明确父高时等于 0 - 解决方法：给弹窗内容容器（如
.modal-body）设display: flex; justify-content: center; align-items: center; min-height: 80vh - 如果内容本身是
position: absolute或transform元素，align-items直接失效——Flex 只对文档流内子元素生效
真正难的不是写出那几行 CSS，而是弹窗插入 DOM 后，它的父级（通常是 body）是否具备稳定定位上下文，以及是否被第三方脚本（比如广告 SDK、埋点库）悄悄修改了 overflow 或 height。动态插入的弹窗，务必检查 getComputedStyle(document.body).position 是否为 static——是的话，absolute 会相对 viewport 定位，一滚动就飞走。
