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> 上**同时添加** modal-dialog-centered 类即可：
<div class="modal-dialog modal-dialog-centered">
注意点：
- 别用
align-items-center或align-self-center去套模态框，它们对.modal-dialog无效 - JS 方案容易失败，因为模态框弹出前高度为 0，弹出后又可能受动画影响取值不准
- 如果用了自定义
max-width或重写了.modal-dialog的margin，要确认没覆盖掉modal-dialog-centered的 flex 行为
多列等高+垂直居中要用 d-flex + h-100 组合
栅格系统里多个 .col 高度不一致时，想让每列内部内容都垂直居中，不能只靠 .row 加 align-items-center——因为 .col 默认是 block，且高度由内容决定。
正确做法是让每列变成 flex 容器，并强制等高：
- 给
.row加d-flex和h-100（或min-vh-100） - 给每个
.col加d-flex align-items-center justify-content-center - 如果列内有
.card等组件，记得给它们也设h-100，否则内部高度撑不满 - 别漏掉
justify-content-center，否则水平方向不会居中
复杂点在于：flex 布局下，height: 100% 不再可靠，所有需要撑高的中间容器（比如 .card-body）都得显式加 h-100 或 min-height，否则垂直居中就断在某一层。
