最稳通用的响应式居中方案是 position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%)，它不依赖尺寸、适配动态内容与视口变化，且兼容可访问性；需配合 width/max-width 使用，并注意 Bootstrap 5 的 modal-dialog-centered 类使用限制及模态框完整交互逻辑。
直接用 position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%)，是最稳、最通用的响应式居中方案——它不依赖模态框尺寸，也不受内容动态加载或视口变化影响。
为什么不能只靠 margin: auto 或负边距
负边距（如 margin-top: -150px）要求模态框宽高完全固定，一旦加了 max-width、min-height 或媒体查询，立刻失准；margin: auto 在 position: absolute 下需同时设 top/bottom/left/right 为 0，但此时若父容器不是全屏，居中基准就错了。响应式场景下，这些方式维护成本高、容错性差。
- 移动端 Safari 对
100vh解析不稳定，用height: 100vh做遮罩层高度会随地址栏收起跳动 -
margin: auto在position: fixed下不生效，浏览器忽略它 - 负边距无法适配字体缩放、系统字号调整等可访问性需求
transform: translate(-50%, -50%) 必须配合 position: fixed
如果只写 transform 而漏掉 position: fixed，元素仍按文档流定位，top: 50% 会相对于最近的 position: relative 父容器计算，滚动时偏移；而 position: fixed 锚定到视口，才能保证“始终居中”。
- 必须显式设置
width或max-width，否则position: fixed下width: auto会撑满整个视口 - 推荐组合：
width: 90%+max-width: 500px+max-height: 80vh - 移动端 Safari 偶有渲染延迟，可在模态框根元素加
will-change: transform
Bootstrap 5 用户别自己写 CSS 居中逻辑
Bootstrap 5 已将垂直居中封装为 modal-dialog-centered 类，但它只在 .modal-dialog 上生效，且依赖 .modal 的 display: flex 布局。加错位置（比如加在 .modal-content 或 .modal 上）等于没加。
立即学习“前端免费学习笔记（深入）”；
- 结构必须完整：
<div class="modal"><div class="modal-dialog modal-dialog-centered">...</div></div> - 动态插入模态框时，确保 DOM 已挂载到
document.body再调用show() - IE11 不支持该类（Bootstrap 5 官方已放弃 IE 支持），如需兼容，应回退到手动
transform方案
真正容易被忽略的是：居中只是第一步。模态框弹出时要锁 body 滚动（body { overflow: hidden }）、管理焦点（Tab 键限制在模态框内）、处理 Esc 关闭，以及关闭后恢复原焦点——这些不写 CSS，但缺一不可。
