最稳的模态框垂直水平居中方案是 position: absolute/fixed + top: 50%; left: 50%; transform: translate(-50%, -50%)，尤其适用于宽高不固定场景。
模态框怎么垂直水平居中？别用 top: 50%; left: 50% 硬算
绝对定位加 transform: translate(-50%, -50%) 是最稳的方案，尤其当模态框宽高不固定时。用 margin 要求父容器有明确高度，top/left 百分比依赖父容器尺寸，而遮罩层（.modal-overlay）往往设为 position: fixed; top: 0; left: 0; width: 100%; height: 100%，此时子元素用 top: 50%; left: 50% 会以视口为基准偏移，但内容本身没动——结果就是错位。
- 确保模态框容器（
.modal）是position: absolute或fixed，且父级（遮罩层）已设好宽高 - 必须同时写
transform: translate(-50%, -50%)，只写一个方向会只偏移一半 - 不要给
.modal设margin: auto—— 它在absolute下无效
z-index 层级乱了？遮罩盖不住下拉菜单或 Tooltip
遮罩层必须有足够高的 z-index，但不能无脑堆数字。常见错误是全局统一设 z-index: 9999，结果和第三方 UI 库（如 Ant Design 的 z-index: 1050）冲突，或者被 iframe、select（尤其在旧版 IE/Edge）穿透。
- 遮罩层推荐
z-index: 1000，模态框本体再 +10（1010），留出空间给弹窗内组件（如日期选择器） - 遇到
select或iframe穿透，遮罩层需加pointer-events: none，模态框容器单独设pointer-events: auto - 避免在多个地方重复定义
z-index，建议抽成 CSS 变量：:root { --z-modal-overlay: 1000; --z-modal: 1010; }
遮罩层背景变灰了，但点击穿透到后面页面？
遮罩层只是视觉层，没阻止事件冒泡或默认行为，用户点它还是会触发背后按钮。关键不是“看起来盖住了”，而是“点它没反应，点里面才响应”。
- 遮罩层必须设
pointer-events: auto（默认就是），但要确保它没有onclick或addEventListener漏掉调用event.stopPropagation() - 更稳妥的做法：遮罩层绑定
click事件，执行closeModal()；模态框内容区域用event.stopPropagation()阻断冒泡 - 别忘了键盘支持：按
Esc关闭时，遮罩层本身不拦截按键，逻辑应在 document 级监听
移动端适配时模态框被缩放或溢出屏幕？
问题常出在 viewport 设置或模态框宽度未约束。iOS Safari 对 fixed 元素在滚动时渲染异常，Android Chrome 则可能因缩放导致遮罩层高度计算偏差。
立即学习“前端免费学习笔记（深入）”；
-
.modal宽度别写死500px，改用max-width: 90vw，并加width: fit-content配合margin: 0 auto - 遮罩层
height: 100vh在 iOS 上可能小于实际可滚动高度，改用min-height: 100vh更安全 - 禁止用户缩放：在
<meta name="viewport">中确认不含user-scalable=yes，且模态框不触发双击缩放（避免内部文本过小）
居中逻辑看似简单，但跨设备、跨浏览器时，transform 和 vh 的表现差异、z-index 的隐式继承、事件捕获时机，三者叠加最容易漏查。动手前先在真机上滚动+缩放+点遮罩，比看一遍文档管用。
