modal-dialog-centered 是唯一需要加的类名，必须加在 .modal-dialog 元素上才能实现水平垂直双居中，加在 .modal 或 .modal-content 上无效；它基于 top: 50% + transform: translate(-50%, -50%)，兼容 fade 动画、动态内容及响应式场景。
modal-dialog-centered 是唯一需要加的类名
Bootstrap 5 默认只水平居中，垂直方向靠顶——这不是 bug，是设计如此。要同时实现水平和垂直居中，modal-dialog-centered 就是官方提供的开箱即用方案，它基于 top: 50% + transform: translate(-50%, -50%)，天然适配所有分辨率、缩放、横竖屏切换，且不依赖 JS 或额外 CSS。
必须加在 .modal-dialog 元素上，加在 .modal 或 .modal-content 上完全无效：
- ✅ 正确：
<div class="modal-dialog modal-dialog-centered"> <li>❌ 错误：<code><div class="modal modal-dialog-centered"> <li>❌ 错误：<code><div class="modal-content modal-dialog-centered"> <h3>为什么 d-flex / my-auto / align-items-center 都不管用</h3> <p><code>.modal-dialog默认是position: relative的块级元素，不是 Flex 容器。所以d-flex、my-auto、align-items-center这些类对它自身不起作用——它们只影响子元素的排列，而.modal-dialog本身没有参与 flex 布局的父容器（除非你手动改了.modal的 display）。更关键的是，Bootstrap 的
fade动画会主动设置.modal.fade .modal-dialog的margin-top（如-200px），如果用自定义样式覆盖了这个值，就会和modal-dialog-centered的transform冲突，导致位置偏移或动画错乱。检查方式：打开开发者工具，看
.modal-dialog的 computedmargin-top是否仍为初始负值（非0）。动态创建模态框时居中失效的真正原因
JS 拼接 HTML 后直接
$('body').append(modalHtml).find('.modal').modal('show')很容易失败——因为modal-dialog-centered虽不依赖内容尺寸，但某些内部逻辑（比如 backdrop 高度计算、滚动锁定）会在show()前读取.modal-dialog的offsetHeight。若此时 DOM 还没挂载，值为0，可能引发 Safari 下视口重算异常或键盘弹出错位。正确顺序：
- 先
$('body').append(modalHtml) - 再等待 DOM 更新（可用
requestAnimationFrame或setTimeout(, 0)） - 最后调用
$('#myModal').modal('show')
更稳妥的做法是监听
shown.bs.modal事件，而不是show.bs.modal—— 前者确保渲染完成、尺寸可读。嵌套在非
下时居中基准就错了Modal 默认 append 到
document.body，居中基准是整个视口。如果你手动把 Modal 插入到某个局部容器（比如<div id="app">），而该容器设置了 <code>position: relative或overflow: hidden，.modal-dialog就会相对于这个容器定位，而非视口，结果就是“居中”变“偏移”。验证方法：用开发者工具检查
.modal是否为的直接子节点。避免使用
container选项指向非body元素，除非你明确需要局部居中；若必须嵌套，需同时给父容器加position: relative+height: 100vh，否则 flex 居中无高度参考。真正容易被忽略的是：水平居中不是靠调
margin，垂直居中也不是靠改top；一旦动了.modal-dialog的display、position或父级布局，就等于绕开了 Bootstrap 的默认机制，得自己兜底。 - 先
