modal-dialog-centered 必须加在 .modal-dialog 上，依赖其 position: relative 和 top: 50% + transform: translate(-50%, -50%) 实现垂直居中；加错位置无效，且需避免覆盖 fade 动画的 margin-top 或动态创建时未挂载 DOM 就调用 show。
modal-dialog-centered 必须加在 .modal-dialog 上
Bootstrap 5 的垂直居中逻辑只作用于 .modal-dialog 元素，不是 .modal，也不是 .modal-content。类名加错位置就完全无效。
它依赖 .modal-dialog 的 position: relative 和内置的 top: 50% + transform: translate(-50%, -50%) 组合，这两个声明只有在该元素上才被 Bootstrap 正确注入和维护。
- ✅ 正确：
<div class="modal-dialog modal-dialog-centered"> <li>❌ 错误：<code><div class="modal modal-dialog-centered">（<code>.modal是display: block，不响应transform） - ❌ 错误：
<div class="modal-content modal-dialog-centered">（<code>.modal-content是子容器，没被设计为定位锚点）用了 fade 动画时，别覆盖 .modal.fade .modal-dialog 的 margin-top
Bootstrap 的
fade动画会为.modal.fade .modal-dialog设置初始margin-top: -200px（或类似值），让模态框从上方滑入。如果 CSS 中手动写了.modal-dialog { margin-top: 0 }或!important覆盖，就会和modal-dialog-centered的transform冲突，导致位置偏移或动画错乱。- 检查浏览器开发者工具中，
.modal-dialog计算后的margin-top是否仍为初始值（非0） - 避免在全局样式里重置
.modal-dialog的margin，尤其不要写.modal-dialog { margin: 0 } - 如需微调起始位置，优先改
transition或用show.bs.modal事件延迟触发，而不是硬覆盖 margin
动态创建模态框时，必须先挂载 DOM 再调用 modal('show')
JS 拼接 HTML 后直接
$('body').append(modalHtml).find('.modal').modal('show')容易失败——因为modal-dialog-centered的transform虽然不依赖尺寸，但某些内部计算（比如 backdrop 高度、滚动锁定逻辑）会在show前读取.modal-dialog的offsetHeight。若此时元素还没挂到 DOM，值为0，可能引发 Safari 下的视口重算异常或键盘弹出错位。立即学习“前端免费学习笔记（深入）”；
- 正确顺序：
$('body').append(modalHtml)→ 等待 DOM 更新（可用requestAnimationFrame或setTimeout(..., 0)）→ 再$('#myModal').modal('show') - 更稳妥：用
shown.bs.modal事件监听渲染完成，而非show.bs.modal - 如果模态框内容含图片、CodeMirror、视频等异步加载项，首次居中没问题，但高度突增后不会自动重定位——这是预期行为，无需干预
Bootstrap 4 及更早版本不能用 modal-dialog-centered
modal-dialog-centered是 Bootstrap 5 引入的类，Bootstrap 4.2+ 官方文档未收录，4.0–4.1 完全不存在。强行复制该类名到 v4 项目里不会生效，因为 v4 的.modal-dialog默认是display: table-cell+vertical-align: middle，且依赖外层.modal的display: table行为，与 v5 的 flex + transform 机制不兼容。- v4 稳妥方案：加轻量 CSS，例如
.modal-dialog-centered { top: 50% !important; transform: translateY(-50%) !important; }，并确保.modal有position: relative - 避免用 JS 在
show.bs.modal里算margin-top：容易忽略$(window).scrollTop()，导致滚动后模态框飘到视口外 - 别尝试给
.modal-dialog加d-flex align-items-center：v4 的.modal不是 flex 容器，加了也无效
my-auto、mt-5、align-items-center直接加在.modal上，在 Modal 场景下基本都只是碰巧临时有效，一换设备或一滚动就露馅。 - 检查浏览器开发者工具中，
