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">
<h3>动态内容导致高度变化后偏移？</h3>
<p>比如模态框里用 <code>AJAX</code> 加载富文本、图片或第三方组件（如 <code>CodeMirror</code>），加载完成前高度为 0，加载后突然撑高，但 <code>modal-dialog</code> 没重新居中。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>Bootstrap 不监听内部尺寸变化，不会自动重排</li>
<li>不能依赖 <code>shown.bs.modal</code> 事件——它只在 show 动画开始后触发，此时内容可能还没渲染完</li>
<li>更可靠的时机是等内容真正就绪，比如图片加载完、<code>resize</code> 后延时 1 帧</li>
</ul>
<p>简单方案：在内容加载完成后手动触发重居中：</p>
<pre class="brush:php;toolbar:false;">$('#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 的小脾气。漏掉任意一环，都可能在某个用户那里变成“弹窗失踪案”。
