bootstrap 3模态框垂直居中需清除默认margin-top并为.modal-dialog添加position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);，确保父容器.modal已设position: relative，同时添加max-height: 80vh和overflow-y: auto防溢出。
Bootstrap 3模态框默认不垂直居中，需手动覆盖CSS
Bootstrap 3 的 .modal-dialog 默认是顶部对齐的，靠 margin-top 模拟居中（值为 10%），在不同屏幕高度下容易偏上或留白过多。真垂直居中必须脱离文档流并用 transform 或 flex 实现，但要注意兼容性与模态框的显示逻辑。
用 transform: translate(-50%, -50%) 最稳妥
这是兼容 IE9+ 且不影响 Bootstrap 3 原有动画和 backdrop 的主流做法。关键在于只修改 .modal-dialog，不碰 .modal 或 .modal-content，否则会干扰 fade 动画或遮罩层定位。
实操建议：
- 给
.modal-dialog添加position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 必须确保父容器
.modal设置了position: relative;（Bootstrap 3 默认已设，无需额外加） - 移除 Bootstrap 3 原有的
margin-top: 10%;，否则 transform 和 margin 叠加会导致错位 - 如果模态框内容过高，需加
max-height: 80vh;和overflow-y: auto;防止溢出视口
.modal-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
max-height: 80vh;
}
.modal-content {
overflow-y: auto;
}
别用 display: flex 在 .modal 上强行居中
有人尝试给 .modal 加 display: flex; align-items: center; justify-content: center;，这会导致两个问题：
- Backdrop（灰色遮罩层）会随
.modal一起被 flex 影响，可能错位或消失 - Bootstrap 3 的
.modal.in类依赖display: block+opacity动画，flex 容器内子元素的transform动画可能被截断或失效 - 移动端 Safari（iOS 8–9）对 flex + absolute 子元素的渲染不稳定，模态框可能闪现或卡在顶部
响应式要考虑 .modal-dialog 的宽度变化
Bootstrap 3 中 .modal-dialog 在小屏下会变宽（width: auto;），而 transform: translate() 是基于自身宽高的，所以无需额外调整；但如果你手动设了 width: 600px，就得配合 max-width: 90% 和 margin: 0 auto; 回退方案，否则窄屏会横向溢出。
更安全的做法是保留 Bootstrap 的响应式类（如 .modal-lg、.modal-sm），只改定位方式，不碰尺寸逻辑。
垂直居中的核心就两件事：清掉原始 margin，用绝对定位 + transform 锚定中心。其他所有“花式”写法，基本都在和 Bootstrap 3 的 DOM 结构与 CSS 优先级较劲，反而容易在 modal show/hide 切换时出现一帧错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
