用 position: fixed + transform 可实现无需预知宽高的真居中模态框：top: 50%; left: 50%; transform: translate(-50%, -50%)，兼容 IE10+；相比 flex 居中更稳定，避免溢出和层叠上下文干扰；backdrop z-index 设为 1040，modal 设为 1050。

用 position: fixed + transform 实现真正居中

模态框不靠 JS 计算宽高也能居中，关键是避免依赖 top: 50% + margin-top: -height/2 这种需要预知尺寸的写法。现代浏览器下最稳的方式是：

• position: fixed 锁定在视口内，不受滚动影响
• top: 50%; left: 50% 把元素左上角移到视口中心
• transform: translate(-50%, -50%) 反向偏移自身宽高的 50%，实现真居中

这个组合对未知宽高的弹窗也完全适用，且无兼容性问题（IE10+ 支持）。

为什么不用 flex 布局做模态框容器？

有人会想：用一个全屏 div 作为 backdrop，再用 display: flex 居中子元素不行吗？可以，但有隐患：

• 如果模态框内容高度超过视口，flex 容器可能无法正确约束溢出（尤其在 iOS Safari 下）
• 当页面本身已有 overflow: hidden 或自定义滚动容器时，flex 的居中行为容易被干扰
• 必须确保 backdrop 元素是 body 直接子级，否则层级或定位可能失效

相比之下，position: fixed 是更独立、更可控的选择。

z-index 和 backdrop 层级怎么设才不出错？

模态框要盖住所有内容，但又不能挡住系统级 UI（如浏览器地址栏、iOS 底部工具栏）。推荐值如下：

• backdrop 层：z-index: 1040（Bootstrap 5 的参考值，够用且留余量）
• 模态框主体：z-index: 1050，比 backdrop 高一级
• 避免用超大值如 9999，容易和第三方库冲突
• 确保 body 没有 transform、filter 等创建新层叠上下文的属性，否则 z-index 会失效

完整 HTML/CSS 示例（可直接复制）

  
提示
  
这是一个居中的模态框
  关闭

注意：实际项目中应把样式抽离为 CSS 类，这里内联是为了清晰展示关键属性。真正麻烦的不是居中本身，而是 backdrop 点击穿透、ESC 关闭、焦点捕获这些交互细节——那些才是模态框真正难搞的地方。