Modal弹窗垂直居中需设.modal为flex并配置align-items:center、justify-content:center及min-height:100vh，同时重置.modal-dialog的margin为0；页面左跳源于modal-open类添加的padding-right，应禁用backdrop或手动控制overflow；fixed元素右移需统一加.is-fixed类由scrollbar.js自动适配；动态内容加载后须调用handleUpdate或延迟16ms触发重居中。
Modal弹窗垂直偏上：根本不是JS问题，是flex没配齐
Bootstrap 5 的 .modal 默认 display: block，而 .modal-dialog 依赖 margin: auto 水平居中，但垂直方向完全没约束。父容器没设 align-items: center，子元素再怎么 margin: auto 也浮不上去。
直接给 .modal-dialog 加 top: 50% + transform: translateY(-50%) 是危险操作——它会被 .modal 的 overflow: hidden 切掉上半部分。
.modal { display: flex; align-items: center; justify-content: center; min-height: 100vh; }-
.modal-dialog { margin: 0; }—— 必须加，否则margin: auto和 flex 对齐互相打架 - 若内容很高，追加
.modal-content { max-height: 90vh; overflow-y: auto; }防溢出
弹窗时页面“向左跳”：body的padding-right在捣鬼
这不是模态框自己动了，而是 Bootstrap 在 body 上加了 modal-open 类后，自动塞了个 padding-right: 17px（滚动条宽度），用来补偿滚动条消失造成的视觉抖动。右边突然变宽，整页就“被吸向左”。
macOS 或禁用滚动条的环境里这个值可能是 0，反而导致错位。
- 最稳做法：
data-bs-backdrop="static"+ 手动控制document.body.style.overflow = 'hidden'，跳过所有 padding 补偿逻辑 - 若必须支持点击遮罩关闭，改用 JS 监听
show.bs.modal事件，移除modal-open类并设overflow: hidden - 硬覆盖 CSS 可行但风险高：
body.modal-open { padding-right: 0 !important; overflow-y: scroll !important; }，但会强制滚动条常驻
fixed元素右移：不是bug，是padding没适配
模态框打开时，body 加了 padding-right，但 position: fixed 元素不受影响，结果它们就向右偏移，刚好占掉滚动条位置。
别手动给 fixed 元素加 right: 17px —— 不同设备滚动条宽度不同，且关闭模态框后还得清。
- 统一方案：给所有可能偏移的 fixed 元素加
.is-fixed类（如<header class="is-fixed">） - Bootstrap 内置的 scrollbar.js 会自动识别
.is-fixed，并在模态框开关时同步增减其padding-right - 这个类本身无样式，纯语义钩子，安全、轻量、可维护
动态内容加载后偏移：modal不监听内部变化
模态框里用 AJAX 加图片、富文本或第三方组件（如 CodeMirror），加载前高度为 0，加载后突然撑高，但 .modal-dialog 不会自动重居中。
shown.bs.modal 事件太早——动画刚启动，内容还没渲染完。
- 可靠时机：等图片加载完成、DOM 尺寸稳定后再调用
$('#myModal').modal('handleUpdate') - 简单兜底：内容加载完后
setTimeout(() => $('#myModal').modal('handleUpdate'), 16)（一帧延迟） - 避免在
.modal-dialog里写死height或max-height，干扰 flex 自适应
.is-fixed 类和 .modal-dialog { margin: 0 } 这两处——前者让 fixed 元素“跟上节奏”，后者让 flex 居中不被 margin 干扰。其他问题基本靠这四条就能压住。 
