modal-dialog-centered仅垂直居中且全断点生效，水平对齐需用响应式justify-content类；小屏贴顶/大屏垂直居中须JS监听断点动态切换类并调用handleUpdate；Modal必须挂载到body顶层以确保定位机制正常。
modal-dialog-centered 在小屏大屏下都生效，但“定位”不等于“居中”
Bootstrap 5 的 modal-dialog-centered 类只控制垂直方向的居中（top: 50% + transform: translateY(-50%)），它对水平方向完全无影响，也不随断点变化。所谓“不同断点下不同定位”，实际是三类独立需求混在一起：水平对齐、垂直位置微调、是否显示——不能靠一个类解决。
标题和按钮在不同断点下左右/居中切换要改 flex 属性，不是 text-* 类
.modal-header 是 flex 容器，text-center 对它无效。想让标题小屏左对齐、大屏居中，得用响应式 justify-content 类：
- 加
justify-content-start（默认已有，可省略）实现小屏左对齐 - 叠加
justify-content-lg-center，≥992px 时覆盖为居中 - 关闭按钮依赖
justify-content-between结构，改成justify-content-sm-between justify-content-lg-center - 再给
.modal-title加flex-grow-1 text-center，确保大屏下文字视觉居中
Modal 整体在小屏贴顶、大屏垂直居中，必须用 JS 动态切换类
Bootstrap 没有 modal-dialog-centered-md 这种响应式变体。modal-dialog-centered 是全断点生效的，硬套媒体查询或类组合会失效。真实可行的做法是监听断点并手动控制：
- 用
window.matchMedia('(min-width: 992px)')判断当前断点 - 在
shown.bs.modal事件里，根据结果添加或移除modal-dialog-centered - 同时调用
$('#myModal').modal('handleUpdate')，强制重算位置 - 如果 Modal 不在
<body>下（比如被 Portal 到某个 div），所有计算都会错乱
小屏隐藏大屏显示，不能只靠 d-none，JS 调用也得同步判断
仅加 d-none d-lg-block 只是隐藏 DOM，但若小屏用户点击按钮后仍执行 $('#myModal').modal('show')，Modal 会强行弹出并破坏响应逻辑。必须双端控制：
- CSS 层用
d-none d-lg-block确保小屏时 DOM 不渲染、不占位、不触发事件 - JS 层调用前加断点检查：
if (window.matchMedia('(min-width: 992px)').matches) { $('#myModal').modal('show'); } - 同步控制
backdrop和keyboard选项，避免小屏误触穿透 - Modal 必须挂载到
<body>顶层，否则响应类可能被父容器样式覆盖
真正难的不是写几个类，而是理解 Bootstrap Modal 的定位机制本质是三层叠加：.modal（flex 容器，管水平）、.modal-dialog（定位锚点，管垂直）、内容区（自身布局）。任何一层被自定义样式或嵌套结构干扰，都会让“响应式定位”变成玄学。
