用 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 示例（可直接复制）
<!-- backdrop 和 modal 同级，都挂载在 body 下 -->
<div id="modal-backdrop" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 1040;"></div>
<div id="modal" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1050; max-width: 90vw; max-height: 80vh; overflow-y: auto;">
<h3>提示</h3>
<p>这是一个居中的模态框</p>
<button onclick="document.getElementById('modal-backdrop').remove(); document.getElementById('modal').remove();">关闭</button>
</div>注意：实际项目中应把样式抽离为 CSS 类，这里内联是为了清晰展示关键属性。真正麻烦的不是居中本身，而是 backdrop 点击穿透、ESC 关闭、焦点捕获这些交互细节——那些才是模态框真正难搞的地方。
