modal-dialog-centered仅实现垂直居中，不控制内容溢出；内容过长时需配合modal-dialog-scrollable类或手动设置.modal-body的max-height和overflow-y:auto来启用局部滚动。
modal-dialog-centered 加了但内容一长就出现垂直滚动
加了 modal-dialog-centered 后模态框确实垂直居中了，但内容稍多（比如表单字段超过 5 行或带图片）就会触发垂直滚动条——这不是 bug，而是 Bootstrap 的默认行为：它只负责定位，不控制内容溢出。
-
modal-dialog-centered只设置top: 50%和transform: translate(-50%, -50%)，不干预高度限制 - 当内容总高度 > 视口高度时，
.modal-content会自然撑开，浏览器按需显示滚动条 - 如果想“禁止滚动+保持居中”，必须主动约束高度，而不是依赖居中类本身
推荐做法是组合使用 modal-dialog-scrollable：它让 .modal-body 可滚动，而 .modal-header 和 .modal-footer 固定不动。这样既避免整框滚动带来的体验断裂，又保留居中视觉锚点。
✅ 正确写法：<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<h3>为什么给 .modal-content 加 max-height 不起作用</h3>
<p>直接给 <code>.modal-content 设 max-height: 80vh 或 overflow: hidden，经常没效果——因为 .modal-content 默认是块级元素，它的高度由子元素决定，而父级 .modal-dialog 没设高度参考，导致 max-height 失效。
- 必须同时约束
.modal-dialog的高度上下文，例如加min-height: 100vh或用display: flex+flex-direction: column - 更稳妥的方式是把高度限制逻辑下放到
.modal-body：它本就是设计为可滚动区域，加max-height: 60vh+overflow-y: auto即可生效 - 注意不要在
.modal-body上用height（会截断内容），max-height才是安全选择
移动端 Safari 下居中后内容被键盘顶起、滚动失效
iOS Safari 弹出软键盘时，视口高度突变，modal-dialog-centered 的 transform 基准没更新，导致模态框上移、内容被遮挡、滚动卡死。
- 这不是 CSS 能解决的问题，是浏览器渲染机制限制：键盘弹出时，
window.innerHeight变小，但transform不自动重算 - 不要监听
resize并手动调modal.handleUpdate()—— 它在键盘场景下常读到错误尺寸，反而让位置跳变 - 真正有效的做法是：确保
.modal-body内部有可聚焦元素（如<input>），且不设position: fixed；让浏览器原生处理滚动锚点 - 若必须强制响应，可在
focusin事件后延时 1 帧调用modal.handleUpdate()，比resize更可靠
动态加载内容后模态框不再居中
用 AJAX 或组件（如 CodeMirror、富文本编辑器）异步填充 .modal-body 后，模态框看起来“偏上”了——不是居中失效，而是初始居中基于加载前的空高度计算，内容撑开后没重新定位。
-
modal-dialog-centered是一次性定位，不监听内部 DOM 变化 -
shown.bs.modal事件太早，此时异步内容还没渲染完成 - 正确时机是等真实内容就绪：图片用
load事件，CodeMirror 用ready回调，AJAX 用then后 - 之后调用
modal.handleUpdate()（Bootstrap 5 原生方法），它会强制重读.modal-dialog尺寸并应用 transform - 注意：这个方法只对已初始化的 Modal 实例有效，不能对未挂载 DOM 的节点调用
真正容易被忽略的是：modal-dialog-centered 的居中能力完全依赖于 .modal 的 display: flex 和 align-items: center 计算，一旦被第三方 CSS（比如某个 UI 主题）覆盖掉 .modal 的 display 或 align-items，整个机制就崩了——这时候检查 DevTools 里 .modal 的 computed 样式，比反复改类名更快定位问题。
