Bootstrap中文字垂直居中需父容器设d-flex、align-items-center及明确高度（如min-vh-100），三者缺一不可；仅加align-items-center无效，因其是容器属性且依赖Flex布局与高度上下文。
用 display: flex 居中必须确保父容器有明确高度
Flex 垂直居中只靠 align-items: center 是不够的——它需要父容器在交叉轴（默认是垂直方向）上有可参考的高度。如果父容器是 .overlay 或 body，而 html 和 body 没设高度，align-items 就会失效。
常见错误现象：模态框看起来“贴顶”或位置飘忽，开发者工具里发现 .overlay 的计算高度是 0px。
- 给
html和body加min-height: 100vh（比height: 100vh更安全，防内容溢出） -
.overlay必须设display: flex+align-items: center+justify-content: center - 避免在
.modal自身上加position: absolute或position: fixed，否则它会脱离 Flex 流，居中立即失效 - 移动端 Safari 中，
100vh可能被键盘弹出压缩，可改用min-height: 100dvh（Chrome 102+/Safari 16.4+ 支持）
transform: translate(-50%, -50%) 的定位锚点容易错配
这个方案看似简单，但实际出问题最多：不是写法错，而是定位上下文没理清。它依赖 top: 50% 和 left: 50% 先把元素左上角移到父容器 50% 位置，再靠 transform 回拉自身宽高的一半。
典型错误现象：滚动页面时模态框突然偏移；横屏切换后位置不对；模态框在嵌套 overflow: auto 的区域里“卡在顶部”。
立即学习“前端免费学习笔记（深入）”；
- 父容器（比如遮罩层）必须设
position: relative或position: fixed，否则top: 50%会向上找最近的定位祖先，甚至落到body上 - 模态框自身推荐用
position: fixed（不是absolute），保证始终相对于视口定位，滚动不偏移 - 别在全局样式里重置
.modal-dialog { margin: 0 }，尤其当用了fade动画时，会覆盖 Bootstrap 内置的margin-top: -200px起始值，导致transform锚点错乱
Bootstrap 5 别手写居中，直接用 modal-dialog-centered
Bootstrap 5 已把垂直居中逻辑封装进 modal-dialog-centered 类，它不是“锦上添花”，而是唯一被框架验证过的路径。手动加 transform 或 d-flex 都可能因类优先级、DOM 插入时机或动画冲突而失效。
常见错误现象：加了类但没效果；JS 动态创建后模态框仍贴顶；移动端 Safari 首次打开偏移。
- 类名必须加在
<div class="modal-dialog">上，加在.modal或.modal-content上完全无效 - 不能省略基础类
modal-dialog，否则 CSS 选择器.modal-dialog.modal-dialog-centered不匹配 - 动态创建时，先用
document.body.appendChild(modalEl)挂载 DOM，再调用new bootstrap.Modal(modalEl).show()；不要在show()后立刻读取offsetHeight手动计算 - 若内容含异步加载项（如图片、远程表单），监听
shown.bs.modal事件确认渲染完成，再检查是否居中
Grid 的 place-items: center 兼容性仍有缺口
place-items: center 看似一行代码搞定，但它对浏览器支持和父容器约束比 Flex 更敏感。不是所有“支持 Grid”的浏览器都支持这个简写。
常见错误现象：Safari 15 下模态框偏上；IE11 完全不显示；模态框在非全屏容器内（如侧边栏弹窗）边缘留白异常。
- Chrome 68+/Firefox 63+/Safari 16.4+ 支持完整
place-items；Safari 10.1–16.3 需拆成align-items: center; justify-items: center - IE 完全不支持，加
-ms-grid也仅支持旧式语法，无法等效替代 - 如果模态框要限制在某个区块内居中（而非全屏），Grid 默认不继承父容器的
padding或margin，需额外处理外边距 - 和 Flex 一样，父容器仍需有明确高度，
place-items不解决高度缺失问题
