Bootstrap 5 模态框默认不垂直居中，因 .modal 缺少 align-items: center；需添加 .modal { display: flex; align-items: center; justify-content: center; } 并用 min-height: 100vh 保障安全。
Bootstrap 5 模态框默认不垂直居中？
是的，modal 在 Bootstrap 5 中默认只水平居中，垂直方向靠顶部——这是很多人点开就发现“弹窗飘在上面”的原因。根本不是 bug，而是设计如此：modal-dialog 使用 flex-direction: column + margin: auto 实现居中，但父容器 modal 的 display: flex 缺少 align-items: center，导致子元素无法垂直居中。
- 只改
modal-dialog的margin不可靠（比如内容高过视口时会截断） - 别直接给
modal-dialog加top: 50%+transform，它会被modal的overflow: hidden切掉上半部分 - 最稳妥的方式是补全父容器的 flex 行为
推荐在 CSS 中加这一段：
.modal {
display: flex;
align-items: center;
justify-content: center;
}
注意：不要加 min-height: 100% 或 height: 100%，否则在内容短时会撑满全屏；用 min-height: 100vh 更安全。
Bootstrap 4 怎么处理？
Bootstrap 4 的 modal 默认就是垂直居中的，因为它用的是 display: table-cell + vertical-align: middle 布局。但如果你发现它没居中，大概率是以下情况之一：
- 外层包裹了自定义
position: relative容器，干扰了modal的定位上下文 - 加载模态框时 DOM 还没 ready，
modal('show')被提前调用，导致尺寸计算错误 - 用了
modal-dialog-centered类但写在了错误位置（必须加在modal-dialog元素上，不是modal）
检查是否漏了这个类：
<div class="modal-dialog modal-dialog-centered">
动态内容导致高度变化后偏移？
比如模态框里用 AJAX 加载富文本、图片或第三方组件（如 CodeMirror），加载完成前高度为 0，加载后突然撑高，但 modal-dialog 没重新居中。
- Bootstrap 不监听内部尺寸变化，不会自动重排
- 不能依赖
shown.bs.modal事件——它只在 show 动画开始后触发，此时内容可能还没渲染完 - 更可靠的时机是等内容真正就绪，比如图片加载完、
resize后延时 1 帧
简单方案：在内容加载完成后手动触发重居中：
$('#myModal').modal('handleUpdate');
这个方法会强制重新计算 modal-dialog 的位置，是 Bootstrap 自带的，但文档里藏得深。
移动端 Safari 上居中失效？
常见于 iOS 15+，特别是模态框内有 input 或 textarea 且被软键盘顶起后，再关闭键盘，modal 会卡在顶部不动。
- 本质是 Safari 的 viewport 缩放和滚动行为异常，导致
getBoundingClientRect()计算失真 - 不要用
window.scrollTo(0, 0)强制滚动——可能引发白屏或跳动 - 稳妥做法是在
hidden.bs.modal后加一个setTimeout延迟重置
示例修复：
$('#myModal').on('hidden.bs.modal', function () {
setTimeout(() => {
$(this).modal('handleUpdate');
}, 100);
});
100ms 是经验值，太短可能赶不上 Safari 的 layout 回流节奏。
垂直居中看着简单，但真正要跨浏览器、跨设备、跨内容长度稳住，得盯住 flex 上下文、生命周期时机和 Safari 的小脾气。漏掉任意一环，都可能在某个用户那里变成“弹窗失踪案”。
