align-items-*类必须加在.row上才能控制列对齐，因其作用于Flex容器的子项，而.row才是包裹.col的Flex容器；加在.col上只影响其内部元素。
align-items-* 类必须加在 .row 上才控制列对齐
很多人把 align-items-center 加在 .col 上，结果发现整行列没变化——因为 align-items 是作用于 **Flex 容器的子项**，而栅格中真正包裹列的 Flex 容器是 .row。加在 .col 上只会影响该列内部的子元素（比如文字和图片之间），不是列与列之间的对齐。
正确做法是直接给 .row 加类：
<div class="row align-items-center"> <div class="col">顶部有空白</div> <div class="col">中间内容</div> <div class="col">底部有长文本</div> </div>
-
align-items-start：所有列顶部对齐（默认行为，但显式写上更可控） -
align-items-center：所有列内容在行高范围内垂直居中 -
align-items-end：所有列内容底部对齐 -
align-items-baseline：按文本基线对齐，适合混排图标和短句
父容器没高度，align-items 就是摆设
align-items 不会“撑开”父容器，它只在已有垂直空间里重新分配位置。如果 .row 高度由内容撑开（比如只有两行文字），那所谓“居中”就是在 48px 高里居中——肉眼根本看不出区别。
必须确保 .row 或其某个祖先有明确高度：
- 全屏场景优先用
min-vh-100（推荐，兼容性好且响应式友好） - 嵌套布局用
h-100，但要保证所有父级都加了h-100（.container→.row→ …） - 避免写死
height: 500px，一换设备就错位
典型有效结构：
<div class="container min-vh-100">
<div class="row align-items-center h-100">
<div class="col">垂直居中的内容</div>
</div>
</div>单列特殊对齐别动整行，用 align-self-*
如果只要某一列底部对齐，其他列保持默认位置，就不要改 .row 的 align-items——它会影响全部子列。
此时应该：.col 自己加 align-self-end，前提是它的父容器（即 .row）已经是 Flex 容器（Bootstrap 默认就是）：
<div class="row align-items-start"> <div class="col">默认顶部对齐</div> <div class="col align-self-end">仅此列底部对齐</div> </div>
-
align-self-center、align-self-start同理，只作用于单个列 - 注意：
align-self不能覆盖align-items: stretch的拉伸效果；如果列本身没内容或高度为 0，仍可能不生效
表格单元格垂直对齐别套用 row 的 align-items
表格（<table>）不是 Flex 布局，默认 tr 是 display: table-row，所以给 <tr class="align-items-center"> 是无效的——除非你手动加 d-flex 把它变成 Flex 容器（那就不是标准表格了）。
真表格请直接操作单元格：
- 给
<td>或<th>加align-top/align-middle/align-bottom - 整行统一？老老实实每个单元格都加，别偷懒
- 常见失效原因：单元格里套了
<div class="d-flex">，这时对齐基准变成 div 内部，原align-middle就没用了
最稳妥写法：
<td class="align-middle"><img src="icon.png" class="me-2">带图文字</td>
对齐失效时，第一反应不该是加 !important，而是查两件事：父容器有没有高度、类是不是加在了正确的元素层级上。这两个点卡住，后面所有调整都是白忙。
