modal-dialog-centered 类必须加在 .modal-dialog 上才生效，加错位置或用于 Bootstrap 4 均无效；水平居中默认由 flex 实现，手动设 width 或插入非 body 容器会破坏居中；响应式垂直居中需 JS 动态切换类并调用 handleUpdate。
modal-dialog-centered 类必须加在 .modal-dialog 上才生效
垂直居中不是靠 CSS 覆盖或 JS 计算，而是 Bootstrap 5 内置的 modal-dialog-centered 类控制的——但它只对 .modal-dialog 元素起作用。漏掉这个类，或加错位置（比如加到 .modal 或 .modal-content 上），就永远不垂直居中。
常见错误：
- 把
modal-dialog-centered当作修饰类随便加在 wrapper div 上 - Bootstrap 4 项目里硬套这个类——它根本不存在，4.x 需手动补
display: flex; align-items: center - 动态创建 modal 后直接
show()，但 DOM 还没挂到document.body，flex 布局未计算，类无效
水平居中默认就 OK，别乱动 .modal-dialog 的 width 或 margin
Bootstrap 5 的 .modal 是 display: flex 容器，justify-content: center 已内置，所有断点下自动水平居中。所谓“偏左”，基本是以下原因：
- 手动给
.modal-dialog设了固定width（如600px），破坏了响应式宽度逻辑，导致margin: auto失效 - modal 被插进非
<body>的容器（比如<div id="app">），而该容器有position: relative或overflow: hidden，居中基准从视口变成父容器 - 用
mx-auto或margin-left手动调，反而覆盖了 flex 行为，尤其在 iOS Safari 缩放后更易偏移
小屏贴顶、大屏垂直居中？得用 JS 动态切换类
modal-dialog-centered 没有响应式变体（比如 modal-dialog-centered-lg）。想实现“手机顶部显示、桌面垂直居中”，必须监听断点并手动增删类：
- 用
window.matchMedia('(min-width: 992px)')监听是否进入 lg 断点 - 匹配时给
.modal-dialog加modal-dialog-centered，否则移除 - 每次切换后必须调用
$('#myModal').modal('handleUpdate')，否则高度变化后位置卡住 - 别用
mt-5或top: 20%模拟——.modal-dialog是fixed定位，这些值在键盘弹出、横竖屏切换时完全不可靠
text-* 类在 modal 里失效？先看它是不是被 flex/gird 包着
text-center 对 .modal-body 无效，大概率不是类写错了，而是布局干扰：
-
.modal-body被包在d-flex容器里（比如你手动加了class="d-flex"），此时text-align对子元素不生效 - 里面嵌了
<form>，而某些 UI 库或重置样式强制设了display: block或覆盖text-align - Vue/React 封装组件时，原生
.modal-bodyclass 没透传，或被 scoped style 隔离 - 快速验证：临时加
style="border: 1px solid red"到.modal-body，如果红框没包住文字，说明它被 flex/gird 布局撑开了
真正容易被忽略的是：Modal 的居中行为依赖于原始 DOM 结构和默认 display 层级，一旦你动了 .modal-dialog 的 display、position，或把它塞进任意非 body 的相对定位容器，就得自己兜底——没有“万能居中类”这种东西。
