Bootstrap 5 模态框默认用 flex 垂直居中，但需确保 .modal 为 flex 容器且无干扰样式；常见偏上问题源于父容器定位或 margin 冲突，修复只需三行 CSS：.modal{display:flex;align-items:center;justify-content:center}、.modal-dialog{margin:0}、.modal-content{max-height:90vh;overflow-y:auto}。
Bootstrap 5 模态框默认不居中？先确认版本和结构
Bootstrap 5 的 modal 默认就是用 flex 实现垂直居中的，但前提是父容器（body）没被其他样式干扰。常见现象是模态框偏上、贴顶，或者在某些布局下（比如用了 position: fixed 的导航栏）错位。
检查点：
– 确保没手动覆盖 .modal-dialog 的 margin 或 transform
– 确保没给 body 或 .modal 加 overflow: hidden 以外的定位属性
– Bootstrap 4 和 5 的类名一致，但 4 依赖 top: 50% + transform，5 改用 display: flex，所以混用旧 CSS 可能冲突
强制 flex 居中：只改 .modal-dialog 就够了
不用动整个 Bootstrap 源码，也不用加额外 wrapper。直接在自定义 CSS 里重置 .modal-dialog 的 flex 行为即可，这是最轻量、兼容性最好的方式。
- 确保父容器
.modal是 flex 容器：.modal { display: flex; align-items: center; justify-content: center; } - 让
.modal-dialog不撑满高度：.modal-dialog { margin: 0; }（否则 flex 对齐会被 margin 抵消） - 如果内容过高导致滚动条遮挡，加
max-height: 90vh;到.modal-content
示例最小覆盖：
立即学习“前端免费学习笔记（深入）”；
.modal {
display: flex;
align-items: center;
justify-content: center;
}
.modal-dialog {
margin: 0;
}
.modal-content {
max-height: 90vh;
overflow-y: auto;
}
为什么不用 top: 50% + transform？老方案在现代布局里容易失效
Bootstrap 4 的居中逻辑依赖 top: 50% 和 transform: translateY(-50%)，但它要求父容器有明确高度且不能是 position: static。在以下场景会出问题：
- 页面用了
height: 100vh但实际内容超出，导致top: 50%基准错乱 - 模态框嵌套在
position: relative的卡片或弹层中，父级成了定位上下文 - 移动端 Safari 对
transform在fixed元素里的渲染有兼容性抖动
Flex 方案不依赖定位上下文，也不受父级 height 影响，只要 .modal 是 display: flex 就稳。
移动端键盘弹出时模态框上移？flex 也救不了，得监听 resize
iOS Safari 键盘弹出会触发 resize 事件，但不会改变 document.body 高度，而是把视口“推高”，导致 flex 容器计算错误——这时 align-items: center 失效，模态框卡在顶部。
临时解法（仅 iOS）：
- 监听
window.addEventListener('resize', ...)，检测window.innerHeight是否突变 - 若变小（大概率是键盘弹出），给
.modal加padding-top: env(safe-area-inset-top) - 更稳妥的是：对
.modal-dialog加position: fixed+top: 50%回退逻辑，但只在isIOS && hasKeyboard时启用
这个边界情况没法靠纯 CSS 解决，flex 再好也得配合 JS 判断。
真正麻烦的不是怎么居中，而是居中之后用户一输文字，模态框就不见了——这种细节，不真机测 iOS 就永远漏掉。
