position: fixed 弹窗滚动错位因 fixed 相对视口定位，但 overflow: hidden 或滚动条导致 left: 50% + transform 基准偏移；最稳方案是 top/left/right/bottom: 0 撑满视口，配合 flex 居中，并用 overscroll-behavior: contain 隔离滚动。
为什么 position: fixed 弹窗一滚动就错位？
因为 fixed 是相对于视口定位，但如果你给 body 或父容器加了 overflow: hidden（常见于防滚动穿透），或页面本身有横向滚动条，left: 50% + transform: translateX(-50%) 就会失效——计算基准被偏移，尤其在 Safari 和某些移动端 WebView 中更明显。
真正稳定的居中方式不是靠“算位置”，而是靠“不依赖滚动状态”的布局机制：
- 用
top: 0、left: 0、right: 0、bottom: 0四边撑满视口，再用display: flex+align-items: center+justify-content: center居中内容 - 弹窗内部需要滚动时，**滚动容器必须是弹窗自身**，而不是
body或外部元素 - 禁止对
body设置overflow: hidden后又忘记重置；更稳妥的做法是只给弹窗加overscroll-behavior: contain
如何让弹窗内容可滚动但背景不跟着动？
关键不是锁住 body 的 overflow，而是隔离滚动行为。直接操作 body 容易引发 iOS Safari 的回弹、输入框失焦、滚动条闪现等问题。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 弹窗根元素设
position: fixed+ 四边为0，再用flex居中 - 弹窗内部设一个子容器（比如
class="modal__content"），给它固定高度（如max-height: 80vh）和overflow-y: auto - 在弹窗上加
overscroll-behavior: contain，阻止滚动穿透到外层 - 避免用
body { overflow: hidden }，改用html { overflow: hidden }（更少副作用）或完全不用——现代方案靠contain就够了
示例结构：
.modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
overscroll-behavior: contain;
}
.modal__content {
max-height: 80vh;
overflow-y: auto;
padding: 20px;
}
transform: translate(-50%, -50%) 在哪些场景下会失效？
这个写法看似简洁，但实际在以下情况会偏移：
- 页面存在垂直滚动条 → 视口宽度变小，
left: 50%计算值变小，但transform仍按原始宽算 - 使用了
zoom、transform: scale()等缩放样式 →translate基准被干扰 - 父元素有
perspective或transform-style: preserve-3d→ 触发新层叠上下文，影响坐标系 - iOS Safari 中，键盘弹出后视口高度突变，
top: 50%没有重算
所以除非你 100% 控制页面无滚动条、无缩放、纯静态，否则别依赖 translate(-50%, -50%) 做居中。Flex + fixed 四边撑开是目前最稳的通用解。
移动端键盘弹出时弹窗被顶起或遮挡怎么办？
这不是 CSS 能单独解决的问题，本质是 iOS/Android 键盘会动态压缩视口（visualViewport），而 fixed 元素仍锚定在“逻辑视口”顶部。
能做的有限但有效：
- 监听
resize事件，但注意 iOS 键盘弹出时不一定触发；更可靠的是监听focusin到弹窗内表单控件，然后scrollIntoView({ block: 'center' })对焦元素 - 给弹窗加
scroll-margin-top: 60px（配合scrollIntoView），预留键盘空间 - 避免把输入框放在弹窗底部；尽量居中或偏上，减少被遮挡概率
- 不要用
viewportmeta 的height=device-height—— 它会让键盘弹出时页面缩放失常
最实在的一点：如果弹窗里只有表单，优先考虑全屏式表单页，而非弹窗，体验反而更可控。
事情说清了就结束。居中本身不难，难的是滚动、键盘、缩放、多端兼容这四件事同时发生时，你还得让弹窗“纹丝不动”。多数人卡在“以为只要写对 CSS 就行”，其实得把 JS 行为和原生交互边界一起考虑进去。
