align-items-center没反应的主因是父容器高度为0，因其只在已有交叉轴空间内对齐，不撑高容器；必须加d-flex启用Flex上下文，并配min-vh-100等显式高度。
d-flex + align-items-center 是最稳的容器级垂直居中方案，但必须确保父容器有明确高度，且类要加在直接父容器上。
为什么 align-items-center 没反应？
90% 的失效是因为父容器实际高度为 0。Flex 的 align-items-center 不会“撑高”容器，它只在已有交叉轴空间内对齐。常见错误包括：
- 只加
align-items-center却漏掉d-flex（父容器没进入 Flex 上下文） - 父容器是
<div> 或 <code><section></section>，没设min-height、h-100或min-vh-100 - 父容器是
<div class="row">，但 <code>.row默认靠内容撑高，没显式高度 → computed height ≈ 内容总高 - 用
text-center或vertical-align: middle混搭 —— 前者只影响行内内容水平对齐，后者对块级元素无效 - 给图片的**直接父容器**加
d-flex align-items-center - 确保该容器有明确高度：优先用
min-vh-100（全屏）、h-100（继承父高）或自定义如min-height: 300px - 如果图片需等比缩放并视觉居中，额外加：
img { width: 100%; height: 100%; object-fit: contain; }（注意：不设宽高，object-fit不触发）
图片在容器中垂直居中怎么写？
别碰 vertical-align，也别手写 position: absolute。标准做法分两步：
示例结构：
<div class="d-flex align-items-center min-vh-100"> <img src="logo.png" class="w-50 h-auto" alt="Bootstrap垂直居中怎么做 容器内元素对齐" > </div>
表格单元格文字怎么垂直居中？
表格不是 Flex 容器，align-items-center 在 <tr> 上完全无效。正确方式是作用于单元格本身：
<ul><li>给每个需要居中的 <code><td> 或 <code><th> 加 <code>align-middle
<tr> 上，也不要试图用 <code>d-flex 包裹单元格内容（会破坏表格语义和响应式行为）
<td> 改成 <code><td class="d-flex align-items-center">，但需确认表格布局未因此错乱
<h3>列内子元素贴底对齐怎么做？</h3>
<p>比如卡片右侧一列，想让“立即购买”按钮永远停在底部，不管上面有多少文字：</p>
<ul><li>目标列（<code><div class="col">）必须先变成 Flex 容器：加 <code>d-flex
align-items-end（对齐到交叉轴末端，即底部）mt-auto，它会自动占满上方剩余空间，把按钮“顶”到底部d-flex 后默认变水平排列，需补 flex-column 恢复垂直流关键点始终一致：对齐类生效的前提，是父容器已明确是 Flex 容器，并有可分配的垂直空间。没有高度，就没有“中”。
