模态框在手机上居中失效的根本原因是移动端渲染特性：iOS Safari中100vh随地址栏/键盘动态变化导致高度跳变，fixed定位受祖先transform干扰而退化，且未设max-width和user-scalable=no引发溢出或缩放。
模态框在手机屏幕上居中失败，根本原因不是“没写居中代码”，而是移动端特有的渲染行为和尺寸计算偏差——height: 100vh 在 iOS Safari 中常小于实际可滚动高度，fixed 元素在快速滚动时可能错位，且未约束宽度会导致溢出或缩放。
为什么 top: 50%; left: 50%; transform: translate(-50%, -50%) 在手机上失效？
这套组合本身没问题，但前提被破坏了：父遮罩层（.modal-overlay）若用 height: 100vh，在 iOS 上会因地址栏显隐导致视口高度跳变；同时，如果模态框容器没设 position: fixed 或定位上下文缺失（比如遮罩层没设 position: fixed），top/left 就会相对于错误的参考系计算。
- 遮罩层必须显式设为
position: fixed; top: 0; left: 0; width: 100%; min-height: 100vh;（注意是min-height，不是height） - 模态框本体必须设
position: fixed;，不能依赖父元素relative——移动端 fixed 容器就是最稳的定位上下文 -
transform: translate(-50%, -50%)缺一不可，只写translate(-50%, 0)会垂直偏移一半
模态框宽度怎么防溢出和缩放？
写死 width: 500px 或 width: 80% 在小屏上极易横向滚动或触发浏览器缩放。关键是让宽度“有弹性但有边界”。
- 用
max-width: 90vw代替固定像素值，vw基于视口宽度，天然适配 - 加
width: fit-content让内容撑开宽度，再配合margin: 0 auto水平居中（此时margin: auto在fixed下依然有效） - 禁止用户缩放：
meta标签里确保有user-scalable=no，否则双击或捏合会破坏布局
iOS Safari 滚动时模态框“抖动”或“偏移”怎么办？
这是 Safari 对 position: fixed 的经典渲染缺陷：滚动瞬间，fixed 元素可能短暂脱离视口定位。单纯靠 CSS 无法根治，得加一层 DOM 行为兜底。
立即学习“前端免费学习笔记（深入）”；
- 监听
scroll事件，在滚动开始时给模态框临时加position: absolute，滚动结束再切回fixed（需节流） - 更轻量的做法：给模态框容器加
will-change: transform，触发 GPU 加速，缓解重绘卡顿 - 避免在模态框内放
textarea或input后直接触发软键盘——键盘弹出会改变视口高度，100vh失效。改用min-height: 100dvh（如支持）或 JS 动态读取window.innerHeight
真正卡住人的从来不是“怎么写居中”，而是忘了移动端的 vh 不可靠、fixed 不稳定、宽度不设上限——这些点漏掉任何一个，模态框就在手机上“飘”着。
