<p>Bootstrap 4 不支持 modal-dialog-centered 类，需手动添加 Flex 布局实现垂直居中：为 .modal-dialog 添加 .modal-dialog-centered 类并设置 display: flex、align-items: center 和 min-height: calc(100% - 2rem)，同时重置 .modal-content 的 margin: 0。</p>
Bootstrap 4 没有 modal-dialog-centered 类，必须手动补 CSS
Bootstrap 4 官方不提供垂直居中类，modal-dialog-centered 是 Bootstrap 5 才引入的。直接加这个类完全无效，浏览器会忽略——因为源码里压根没定义它。你看到的“加了没反应”，不是写法错，是版本不匹配。
最轻量、兼容性最好的方案是给 .modal-dialog 加自定义类（比如 .modal-dialog-centered），再用 Flex 布局修正：
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - 2rem);
}
.modal-dialog-centered .modal-content {
margin: 0;
}-
min-height: calc(100% - 2rem)是关键：不能写100vh，否则在 iOS Safari 中键盘弹出时视口高度突变，模态框会“上浮”或错位 -
.modal-content { margin: 0 }是为了抵消 Bootstrap 4 默认给.modal-content设的margin: 0 auto，否则 Flex 的align-items: center会被干扰 - 别只改
.modal或.modal-content，定位锚点必须是.modal-dialog，它是唯一被 Bootstrap JS 读取尺寸和位置的容器
避免用 top: 50% + transform: translateY(-50%) 单独作用于 .modal-dialog
这个组合在 Bootstrap 4 里容易和 fade 动画冲突。因为 .modal.fade .modal-dialog 默认有 margin-top: -200px（滑入动画起始值），如果你手动加了 transform，浏览器会同时计算 margin 和 transform，导致视觉偏移或动画抖动。
更稳的做法是彻底关闭 fade 动画，或改用以下方式（仅当必须保留 fade 时）：
立即学习“前端免费学习笔记（深入）”；
- 确保自定义样式只加在
.modal-dialog上，不要污染.modal或全局.modal-dialog - 删掉所有对
.modal-dialog的margin覆盖，尤其警惕类似.modal-dialog { margin: 0 !important }这种写法 - 如果内容含图片或异步加载项，首次居中可能不准——因为
shown.bs.modal触发时，图片还没加载完，offsetHeight不准；可监听load后再强制重排（比如临时切display: none → block）
移动端 Safari 下 modal 居中“上浮”的真实原因
iOS Safari 键盘弹出时，visualViewport.height 缩小，但 fixed 或 flex 定位仍按原始 document.documentElement.clientHeight 计算，导致模态框看起来“飘高了”。这不是 CSS 写错了，是浏览器行为。
修复思路不是调 top 或 margin，而是响应式重置：
- 监听
resize事件，在键盘收起后延迟 100ms 调用$('#myModal').modal('handleUpdate')（Bootstrap 4 提供的重绘方法） - 或者更直接：在
shown.bs.modal里加一行$(this).find('.modal-dialog').css('transform', 'none')，再立即设回translate(-50%, -50%)，强制触发重绘 - 别依赖
window.innerHeight手动算 top——它在键盘弹出时不可靠，且不同机型返回值差异大
动态创建 modal 时，height() 返回 0 的问题
JS 拼 HTML 后立刻调用 $('#myModal').modal('show')，$('.modal-dialog').height() 经常是 0。这不是 jQuery bug，是 DOM 还没完成 layout：元素已插入 document，但浏览器尚未计算样式和尺寸。
正确顺序只有两种：
- 用
requestAnimationFrame确保下一帧渲染后再读高宽：requestAnimationFrame(() => { $dialog.css('margin-top', (window.innerHeight - $dialog.height()) / 2); }); - 或者等
shown.bs.modal事件——它保证动画完成、DOM 已挂载、尺寸已就绪；但注意：如果内容有图片，仍可能因加载延迟导致第一次居中不准 - 绝对不要用
setTimeout(..., 0)或setTimeout(..., 150)：时间不可控，低性能设备可能仍为 0
真正麻烦的不是加哪几行 CSS，而是 modal 内容高度变化后，Flex 居中不会自动重排——比如展开一个折叠面板，.modal-content 高度变大，但 .modal-dialog 的 align-items: center 不会重新触发。这时候得手动干预，而不是指望 CSS 自动响应。
