Bootstrap模态框垂直居中 Modal弹窗设置-Bootstrap教程-PHP中文网

bootstrap 5 必须为 .modal-dialog 添加 modal-dialog-centered 类才能垂直居中，因其默认仅水平居中、垂直靠顶；该类通过 top: 50% 与 transform: translate(-50%, -50%) 实现可靠居中，适配滚动、缩放及横屏。

bootstrap模态框垂直居中 modal弹窗设置

Bootstrap 5 的 .modal 默认只水平居中，垂直方向是顶部对齐——不是 bug，是设计如此。不加这个类，.modal-dialog 就不会垂直居中。

它依赖父级 .modal 的 flex 布局（Bootstrap 5 已内置 display: flex），内部用 transform: translate(-50%, -50%) 实现，天然适配滚动条、缩放、横屏切换等场景。

✅ 正确写法：<div class="modal-dialog modal-dialog-centered"> <li>❌ 不要加在 <code>.modal 或 .modal-content 上，只对 .modal-dialog 生效
⚠️ 如果用了 fade 动画，检查是否手动覆盖了 .modal.fade .modal-dialog 的 margin-top，会和 transform 冲突
⚠️ 动态创建模态框（比如 JS 拼 HTML 后 append）时，必须先挂载到 DOM，再调用 modal('show')，否则 offsetHeight 读不到真实尺寸，transform 计算失准

Bootstrap 4 默认用 display: table-cell + vertical-align: middle 实现垂直居中，理论上应该居中。但实际偏上，大概率是以下原因：

稳妥做法是加一段轻量 CSS：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.modal-dialog {
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.modal {
  padding: 0 !important;
}

注意：不要给 .modal 加 overflow: hidden，否则 transform 向上偏移的部分会被裁掉。

模态框打开时内容为空或高度为 0（例如富文本、CodeMirror、未加载的图片），等数据回来、图片渲染完成，高度突然变大，但 .modal-dialog 并不会自动重算位置。

最常见的“加了类却没反应”，往往是因为某处 CSS 意外覆盖了关键声明：

检查是否给 .modal-dialog 写了 position: absolute、top、margin-top 或 transform —— 这些会直接干掉 modal-dialog-centered 的 transform
检查是否给 .modal 加了 height: 100% 或 min-height: 100%：这会让 flex 容器失去“可用交叉轴空间”，align-items: center 失效；应改用 min-height: 100vh
检查是否在 body 或 html 上加了 overflow: hidden 或 position: fixed，会切断模态框的定位流
用浏览器 DevTools 直接看 .modal-dialog 元素的 computed transform 值：如果是 none，说明类没生效或被覆盖；如果是 translate(-50%, -50%) 但位置不对，说明参考系错了（比如父容器没 flex）