移动端弹窗最稳方案是position: fixed配合top: 50%、left: 50%和transform: translate(-50%, -50%)，因fixed脱离文档流且相对视口定位，transform精准回拉自身宽高一半实现真居中，不依赖尺寸、兼容性好、不受动态内容影响。
移动端弹窗用 position: fixed + transform: translate(-50%, -50%) 最稳
移动端弹窗必须脱离文档流，position: fixed 是首选——它不随页面滚动偏移，也不受父容器定位影响。但只写 top: 50% 和 left: 50% 会让弹窗左上角钉在视口中心，看起来整体偏右下。必须加 transform: translate(-50%, -50%) 才能真正以自身中心对齐。
常见错误现象：top: 50%; left: 50% 写了，但弹窗始终靠右下角；检查是否漏了 transform，或弹窗被包在某个带 transform 的父容器里（比如轮播组件），那它的定位上下文就变了。
-
body不需要设position: relative——fixed天然相对于视口，这点和absolute不同 - 避免给弹窗本身设
margin或padding后再居中，容易干扰计算；统一用内层容器控制留白 - iOS Safari 中，如果弹窗内容加载后高度突变（比如图片懒加载完成），
transform不会重算，但视觉居中不受影响——这点比负 margin 更可靠
用 inset: 0 + margin: auto 的前提和兼容性坑
现代写法 position: fixed; inset: 0; margin: auto; 看似简洁，但它要求弹窗有明确宽高，且浏览器支持 inset（Safari 15.4+、Chrome 89+）。iOS Safari 15.2 及更早版本直接忽略 inset，导致弹窗撑满全屏。
真实项目中，一旦用了 inset，就别混写 top 或 left——Safari 下可能触发布局抖动，尤其在地址栏收起/展开时。
- 必须显式设置
width和height（如width: 90vw; max-width: 500px;），否则margin: auto在fixed下无效 - 要兼容旧版 Safari，得双写：
inset: 0; margin: auto;后紧跟top: 50%; left: 50%; transform: translate(-50%, -50%); - 如果弹窗外层有
transform: scale(1)或filter: blur(0)，fixed元素会相对于该层定位，inset行为异常
Flex 布局在弹窗里失效的典型原因
很多人试图用 display: flex; justify-content: center; align-items: center; 居中弹窗内容，结果没反应。问题几乎都出在父容器没“撑开高度”——flex 需要可计算的高度来源。
移动端视口变化频繁（横竖屏切换、地址栏收起），100vh 在 iOS Safari 中滚动后不会更新，导致遮罩层高度塌陷，align-items: center 就失去作用。
- 弹窗最外层（如
.modal-overlay）推荐用position: fixed; width: 100%; height: 100%;，而不是height: 100vh - 内部内容容器（如
.modal-content）设display: flex; justify-content: center; align-items: center;，但前提是它父级有明确尺寸 - 如果弹窗内容高度不固定（比如含长文本），用
min-height: 80vh替代height: 80vh，防窄屏裁剪
图片在弹窗里居中错位的根源
弹窗里放一张图，明明写了 text-align: center 或 flex，图片还是贴左或溢出。根本原因是：图片被设了 position: absolute、float 或 transform，直接跳出文档流，flex 或 text-align 对它失效。
响应式图片还要防拉伸和横竖屏错位。iOS Safari 在横屏切回竖屏时，有时缓存旧的 vw 计算值，导致 max-width: 90vw 失效。
- 删掉图片上所有
position、float、transform样式，让它保持在文档流内 - 图片只需两行关键样式：
max-width: 90vw; height: auto;——90vw留边距，height: auto锁比例 - 确保页面
里有，否则vw单位解析不准
真正难的不是选哪种 CSS 写法，而是弹窗插入 DOM 的时机和所处的定位上下文是否稳定——比如 JS 动态创建的弹窗挂到 body 下，而 body 没设 position: relative，那 absolute 就会相对整个 viewport 定位，一滚动就偏；但换成 fixed，又得直面 iOS Safari 的抖动和 100vh 失效问题。这些细节不验证，光抄代码没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
