align-items-center没反应是因为它只对flex容器生效，而Bootstrap 4中.row等默认display为block；必须先给直接父容器加d-flex，再确保其有明确高度（如min-vh-100），否则无空间可居中。
align-items-center 为什么加了没反应
因为 align-items-center 只对 flex 容器生效，而 Bootstrap 4 的大多数容器（比如 .row、.col、.card-header、普通 <div>）默认不是 flex 容器——它们的 <code>display 是 block 或 inline。你直接给子元素加这个类，或者给非 flex 父容器加，它就完全不工作。
常见错误现象：
- 浏览器开发者工具里看到该父元素的
computed display仍是block - 页面布局毫无变化，或子元素反而错位（比如文字缩到左上角）
必须做的第一步：找到要居中的子元素的直接父容器，给它加上 d-flex。只有这时 align-items-center 才有作用对象。
父容器高度为 auto 就等于没写居中
即使加了 d-flex align-items-center，如果父容器高度是 auto（比如靠内容撑开、没设 min-height 或 height），那“垂直居中”就没有参照空间——它会把子元素放在“刚好包住内容”的那个高度里居中，视觉上还是顶着顶部。
立即学习“前端免费学习笔记（深入）”；
解决方式取决于场景：
- 全屏居中：父容器加
min-vh-100（Bootstrap 4 需自行定义或用style="min-height: 100vh;"） - 卡片内居中：给
.card-body设min-height: 200px或类似固定值 - 导航栏 Logo 居中：确保
.navbar本身有足够高度（检查padding和line-height是否被覆盖）
别依赖 height: 100%——它只在父级有明确高度时才有效，容易形成隐式依赖链。
Navbar 中 Logo + 文字混排对齐失效
根本不是文字的问题，而是 <img alt="为什么Bootstrap 4的垂直居中无效_利用align-items-center的CSS类" > 和 <span></span>/<strong></strong> 并排时，浏览器按 vertical-align: baseline 对齐，导致图片底边和文字 x 字高底部对齐，视觉上“文字浮高、Logo 下沉”。此时哪怕外层加了 d-flex align-items-center，只要内部元素没统一 display 行为，基线冲突依然存在。
实操要点：
- 把
<img alt="为什么Bootstrap 4的垂直居中无效_利用align-items-center的CSS类" >和文字包裹在一个<div class="d-flex align-items-center"> 里，而不是只套在 <code>.navbar-brand外层 - 给
<img alt="为什么Bootstrap 4的垂直居中无效_利用align-items-center的CSS类" >显式加style="max-width:90%"（Bootstrap Icons 默认值），或统一设display: inline-block+vertical-align: middle - 避免在
.navbar-brand内直接平级放<img alt="为什么Bootstrap 4的垂直居中无效_利用align-items-center的CSS类" >和文字却不加任何布局控制 -
modal-dialog-centered类是 Bootstrap 5+ 才引入的，Bootstrap 4 里加了也无效 - 你把它加在了
.modal上，而不是.modal-dialog元素上 - 模态框内容是动态加载的（如 AJAX 图片、富文本），加载完成前高度为 0，加载后撑高但未重计算居中位置
- 确认
.modal-dialog没被其他 CSS 覆盖margin（比如某些主题会重置为0） - 动态内容加载完后，手动触发重居中：
$('.modal').modal('handleUpdate')（Bootstrap 4 原生支持） - 不要自己写
top: 50%; transform: translateY(-50%)——容易和 fade 动画冲突，导致抖动或截断
调试技巧：在 DevTools 里临时删掉 vertical-align，看是否立刻错位——能快速验证是不是基线问题。
modal-dialog-centered 在 Bootstrap 4 中不能直接用
Bootstrap 4 的模态框默认用的是 display: table-cell + vertical-align: middle 实现垂直居中，它本身已居中；但如果你发现它偏了，大概率是：
Bootstrap 4 下稳妥方案：
最常被忽略的一点：所有 flex 垂直居中都依赖交叉轴有可用空间，而这个空间必须由父容器的高度显式提供——没有高度，就没有居中。这不是 bug，是 flex 布局的设计前提。
