弹窗必须用 position: fixed 配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%) 实现稳定居中；absolute 因依赖最近定位祖先且受滚动影响而不可靠，遮罩层也需 fixed 并覆盖视口，同时配合 overscroll-behavior 或 overflow: hidden 控制滚动穿透，移动端优先使用 100dvh 并降级 fallback。
弹窗必须用 position: fixed，配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%)，才能真正稳定居中且不随滚动偏移。
为什么不能只用 position: absolute
因为 position: absolute 的定位基准是最近的已定位祖先（position 不为 static）。如果父容器没设 position: relative，弹窗会退到 body 或 html 上计算位置；一旦页面滚动，弹窗就跟着文档流“飘走”。即使加了 top: 50%，它也是按整个文档高度算的，不是视口高度。
- 常见错误现象：
absolute弹窗在长页面中打开后，用户一滚动，弹窗就消失在顶部或底部 - 遮罩层若也用
absolute，且没设height，弹窗会完全错位 - 修复方式：遮罩层和弹窗都改用
fixed，并确保遮罩层覆盖整个视口（inset: 0或top: 0; left: 0; width: 100%; height: 100%）
transform: translate(-50%, -50%) 比负 margin 更可靠
负 margin 要求你提前知道弹窗宽高，比如 margin-left: -200px。但现代弹窗内容常动态变化：文字换行、响应式字体（rem）、max-width 或 fit-content 都会让尺寸不可控。
-
translate()始终基于元素渲染后的实际尺寸计算，无需预设值 - 哪怕弹窗内嵌
textarea或异步加载的图片，居中依然精准 - 注意：
transform会创建新层叠上下文，若弹窗内有下拉菜单、Tooltip 等浮层，需检查其z-index是否被截断
移动端和 Safari 的坑：别只写 100vh
iOS Safari 和部分 Android WebView 在软键盘弹出或地址栏收放时，100vh 会剧烈跳变（比如从 812px 缩到 600px），导致弹窗上蹿下跳。Chrome 120+、Safari 17.4+ 支持更稳定的 100dvh，但必须 fallback。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
min-height: 100dvh;后紧跟min-height: 100vh;（后者覆盖前者） - 旧版 iOS（如 15.6 及更早）需 JS 补偿：
document.documentElement.style.height = window.innerHeight + 'px'，并在resize和键盘事件中更新 - Flex 居中方案中，若父容器没明确高度（如漏了
inset: 0或height: 100%），align-items: center直接失效
遮罩层和滚动穿透常被忽略
仅让弹窗 fixed 并不能阻止背后页面滚动——用户手指一划，背景照常动，视觉割裂。这不是弹窗的问题，而是滚动行为没被约束。
- 最干净解法：
body { overscroll-behavior: contain; }（Chrome 63+/Firefox 93+/Safari 16.4+） - 兼容 fallback：弹窗显示时加
body { overflow: hidden; }，同时记录window.scrollY；关闭后执行window.scrollTo(0, savedScrollY) - 切忌只给 body 加
overflow: hidden却不恢复 scrollY，会导致页面“跳回顶部”
真正容易被忽略的是遮罩层的定位方式和滚动行为控制——它们共同决定了弹窗是否“钉在屏幕中央”，而不是“挂在文档某处”。fixed 是起点，overscroll-behavior 和 100dvh fallback 才是闭环的关键。
