align-items-center没生效是因为父容器未设为flex容器且无明确高度；必须给直接父容器加d-flex并设置min-vh-100等高度类，否则无空间可居中。
align-items-center没生效，是因为父容器不是flex
直接加 align-items-center 没反应，根本原因是它只对 display: flex 容器起作用。Bootstrap 4 的 .row、.col、.card 默认是 display: block，不是 flex 容器——所以这个类加了等于白加。
必须先给子元素的**直接父容器**加 d-flex，否则 align-items-center 就没有作用对象。
- 检查开发者工具里该父元素的
computed display，如果不是flex，说明d-flex没生效或没加对位置 - 别把
d-flex加在.row外层的.container上，而要加在包裹目标元素的那个最内层父容器上 -
d-flex会覆盖text-center对块级子元素的水平居中效果，需要额外用justify-content-center补上
父容器高度为 auto，垂直居中就等于没做
即使加了 d-flex align-items-center，如果父容器高度是 auto（比如靠内容撑开、没设任何高度），那“垂直居中”就没有参照空间——它只是把内容放在一个刚好包住它的窄条里居中，视觉上还是贴顶。
解决方式取决于场景：
- 全屏居中：父容器加
min-vh-100（Bootstrap 4 不自带该类，需自行定义或写style="min-height: 100vh;"） - 卡片内居中：给
.card-body设min-height: 200px或类似固定值 - 导航栏 Logo 居中：确保
.navbar本身有足够高度，重点检查padding和line-height是否被其他样式覆盖 - 避免依赖
height: 100%，它只在父级有明确高度时才有效，容易形成隐式链式依赖
模态框垂直居中只需加一个类，别改JS
Bootstrap 4 的模态框默认顶部对齐，但不需要动 bootstrap.js 或写 JS 计算 margin-top——官方早提供了现成解法：.modal-dialog-centered。
只要在已有 .modal-dialog 的 <div> 上**同时添加** <code>modal-dialog-centered 类即可：
<div class="modal-dialog modal-dialog-centered"> <p>注意点：</p> <ul> <li>别用 <code>align-items-center</code> 或 <code>align-self-center</code> 去套模态框，它们对 <code>.modal-dialog</code> 无效</li> <li>JS 方案容易失败，因为模态框弹出前高度为 0，弹出后又可能受动画影响取值不准</li> <li>如果用了自定义 <code>max-width</code> 或重写了 <code>.modal-dialog</code> 的 <code>margin</code>，要确认没覆盖掉 <code>modal-dialog-centered</code> 的 flex 行为</li> </ul> <h3>多列等高+垂直居中要用 d-flex + h-100 组合</h3> <p>栅格系统里多个 <code>.col</code> 高度不一致时，想让每列内部内容都垂直居中，不能只靠 <code>.row</code> 加 <code>align-items-center</code>——因为 <code>.col</code> 默认是 block，且高度由内容决定。</p> <p>正确做法是让每列变成 flex 容器，并强制等高：</p> <ul> <li>给 <code>.row</code> 加 <code>d-flex</code> 和 <code>h-100</code>（或 <code>min-vh-100</code>）</li> <li>给每个 <code>.col</code> 加 <code>d-flex align-items-center justify-content-center</code> </li> <li>如果列内有 <code>.card</code> 等组件，记得给它们也设 <code>h-100</code>，否则内部高度撑不满</li> <li>别漏掉 <code>justify-content-center</code>，否则水平方向不会居中</li> </ul> <p>复杂点在于：flex 布局下，<code>height: 100%</code> 不再可靠，所有需要撑高的中间容器（比如 <code>.card-body</code>）都得显式加 <code>h-100</code> 或 <code>min-height</code>，否则垂直居中就断在某一层。</p> </div>
