如何实现Bootstrap模态框在屏幕中垂直居中？-Bootstrap教程-PHP中文网

bootstrap 5 模态框需添加 modal-dialog-centered 类才能垂直居中，依赖 flex 布局和 transform；动态创建时须先挂载 dom 再调用 show()；移动端 safari 需监听 resize 重置 transform。

如何实现bootstrap模态框在屏幕中垂直居中？

Bootstrap 5 模态框默认不垂直居中，得加 `modal-dialog-centered`

Bootstrap 5 的 Modal 默认只水平居中，垂直方向是顶部对齐的——这是很多人以为“没生效”的根源。不是 CSS 写错了，是类名漏了。

必须给 div.modal-dialog 同时加上 modal-dialog-centered 才能触发垂直居中逻辑，它会通过 transform: translate(-50%, -50%) 实现，依赖父容器（modal）设了 display: flex 和 align-items: center（Bootstrap 5 已内置）。

只加 modal-dialog-centered，不加 modal-dialog 类无效
如果模态框内容过高（超出视口），它会自动向上偏移，但不会滚动；此时需配合 modal-dialog-scrollable
不兼容 IE11（因依赖 transform + flex），若需支持，得额外写回退样式

Bootstrap 4 怎么办？没有 `modal-dialog-centered` 类

Bootstrap 4 官方没提供垂直居中类，得手动补 CSS 或用变通方案。最稳妥的是在 modal-dialog 上加自定义类，然后用 Flex 布局修正：

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 2rem);
}
.modal-dialog-centered .modal-content {
  margin: 0;
}

注意：min-height 不能写死成 100vh，否则在移动端 Safari 会出现滚动条错位；calc(100% - 2rem) 是为避开 modal-backdrop 的 padding 留白。

别用 top: 50% + transform: translateY(-50%) 单独作用于 modal-dialog，它在动画过程中会抖动
如果用了 fade 动画，确保自定义类加在 modal-dialog 上，而非外层 modal
某些主题或插件可能覆盖了 modal-dialog 的 margin，检查 computed styles 里是否被重置为 0

动态创建的模态框（JS 插入）为什么居中失效？

用 document.body.appendChild() 或 jQuery .appendTo('body') 动态挂载模态框时，如果节点插入顺序不对，Flex 居中会失败——因为 modal 容器还没完成初始化布局。

VPS Bootstrap

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

下载

关键时机：必须等 modal 元素已挂载、且 Bootstrap 的 show 方法执行前，就确保 DOM 结构完整。推荐做法：

先插入整个 <div class="modal">...</div> 到 body，再调用 new bootstrap.Modal(...).show()
不要先 show() 再 append，否则 modal-dialog-centered 的 transform 计算会基于错误的初始位置
如果用 innerHTML 拼接字符串插入，确认 modal-dialog 和 modal-dialog-centered 在同一元素上，没有被 JS 框架意外剥离

移动端 Safari 下模态框“卡在半空”怎么办？

iOS Safari 在键盘弹出/收起后，vh 单位会失真，导致 modal-dialog-centered 的 transform 基准偏移。这不是 Bootstrap bug，是浏览器行为。

临时解法：监听 resize 事件，在键盘收起后强制重置 modal-dialog 的 transform：

window.addEventListener('resize', () => {
  const dialog = document.querySelector('.modal-dialog-centered');
  if (dialog && window.visualViewport?.height) {
    dialog.style.transform = 'translate(-50%, -50%)';
  }
});