Bootstrap 5 模态框垂直居中需同时满足：.modal 为 flex 容器、.modal-dialog 有 modal-dialog-centered 类（提供 top: 50% 和 translateY(-50%)）、且不能遗漏基础 modal-dialog 类；动态创建时需确保 DOM 渲染完成后再显示。
Bootstrap 5 模态框默认不垂直居中，只加 transform 属性手动定位极易失效——根本原因不是写法错，而是没配对 top: 50% 和父容器的 flex 布局约束，或漏了关键类名。
为什么直接给 .modal-dialog 加 transform: translate(-50%, -50%) 不起作用？
因为 .modal-dialog 默认是 position: relative，而 transform 不改变文档流，单独用它无法让元素“锚定”在视口中心。必须同时满足两个条件：
-
top: 50%和left: 50%把元素左上角移到视口中心点 -
transform: translate(-50%, -50%)将自身向左、向上偏移自身宽高的一半 - 但 Bootstrap 5 的
.modal容器默认没有position: relative或display: flex，导致top/left在某些上下文中被忽略
modal-dialog-centered 类到底做了什么？
这是 Bootstrap 5 官方提供的解决方案，它内部声明了：
.modal-dialog-centered {
position: relative;
top: 50%;
transform: translateY(-50%);
}
注意：它只处理垂直方向（translateY），水平居中靠的是 .modal-dialog 自带的 margin: auto 和父容器 .modal 的 display: flex + justify-content: center。所以你必须确保：
-
.modal-dialog同时拥有modal-dialog和modal-dialog-centered两个类 - 不能只写
modal-dialog-centered，否则基础样式丢失，布局崩坏 - 该类不兼容 IE11，若需支持，得额外补
margin-top计算逻辑
动态创建模态框时，modal-dialog-centered 为何有时无效？
常见于 JS 动态插入 HTML 后立即调用 show()，此时 DOM 尚未完成渲染，高度未计算，transform 应用时机错误。解决方式：
- 先将模态框 HTML 插入
document.body，再调用new bootstrap.Modal(...).show() - 或监听
shown.bs.modal事件，在回调里手动触发重排：getComputedStyle(modalDialog).transform - 移动端 Safari 下，弹出后旋转屏幕可能使居中偏移，需监听
resize并重新设置transform
内容过高时，垂直居中还会生效吗？
会，但表现异常：模态框顶部会被截断，因为 transform 位移基于自身尺寸，而 Bootstrap 的 .modal 默认有 overflow: hidden。此时应：
- 改用
modal-dialog-scrollable类，让模态框内部滚动，保持居中逻辑不变 - 避免强行覆盖
max-height或overflow，否则transform可能被裁切 - 不要试图用
vh单位硬设高度——视口变化时会失准，尤其在 iOS Safari 地址栏收放时
真正容易被忽略的点是：垂直居中依赖的是整个链条——.modal 的 flex 容器行为、.modal-dialog 的相对定位起点、以及 modal-dialog-centered 提供的偏移基准。少一环，transform 就只是个无效声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
