Bootstrap栅格系统垂直对齐 Bootstrap如何让列内容垂直居中

align-items-center 无效是因为父容器无明确高度，需为 .row 的父级（如 .container）设置 vh-100/h-75 等高度类，并让 .row 设 h-100 才能生效。

align-items-center 为什么加了没反应？

因为 align-items-center 是作用在 flex 容器（比如 .row）上的，它只负责“在已有高度空间里居中”，不负责“给容器造出高度”。如果 .row 高度由内容撑开（比如只有几行文字），那它根本没有“上下留白”，自然无法居中——子列只能贴着顶部排布。

• 常见错误现象：align-items-center 加在 .row 上，但列内文字/图片还是顶着父容器上边沿
• 根本原因：父级（如 .container 或 .row 的直接父元素）没有设置明确高度，.row 高度 = 内容高度
• 必须配合高度类才能生效，单独用 align-items-* 几乎总是无效的

怎么让 .row 有足够高度来垂直居中？

关键就是给 .row 的**父容器**（通常是 .container 或一个包裹 .row 的 div）设高度，再让 .row 继承这个高度。Bootstrap 提供了现成的高度工具类，组合使用最稳。

• 全屏居中：外层加 vh-100，.row 加 h-100 + align-items-center
• 固定区域居中：父容器设 h-75 或 min-vh-50，.row 跟着设 h-100
• 别直接给 .row 设 height: 100vh —— 这会破坏 Bootstrap 响应式断点的高度继承逻辑

<div class="vh-100 d-flex flex-column">
  <div class="container h-100">
    <div class="row h-100 align-items-center">
      <div class="col">我要垂直居中</div>
    </div>
  </div>
</div>

文字和图片在列内垂直对齐，要动哪一层？

如果只是想让一列里的文字和图片彼此垂直居中（比如图标+说明文字并排），不需要碰 .row 高度，直接在 .col 上启用 Flex 即可。

靠岸学术

一款集翻译，阅读，文献管理于一体的英文文献阅读器

下载

• 场景：卡片内图标左对齐、文字右对齐且垂直居中；表单中 input 和 label 垂直对齐
• 做法：给 .col 加 d-flex align-items-center，再用 justify-content-start/center/end 控制水平位置
• 注意：.col 默认不是 Flex 容器，不加 d-flex，align-items-center 不起作用

<div class="row">
  <div class="col d-flex align-items-center">
    <img src="icon.png" alt="" width="24">
    <span class="ms-2">操作成功</span>
  </div>
</div>

为什么有时候 align-items-center 看似有效，换浏览器就失效？

本质是高度依赖链断裂：某个父级用了 min-height 但没配 height: 100%，或嵌套了非 Flex 容器（比如忘了 .row 必须在 .container 内）。不同浏览器对“无高度 Flex 容器”的渲染宽容度略有差异，导致行为不一致。

• 容易踩的坑：.container-fluid 没设高度，又在外层加了 position: relative 但没给高度
• 兼容性影响：Safari 对 vh 在地址栏缩放时计算不准，可用 min-vh-100 替代 vh-100
• 调试建议：用浏览器 DevTools 检查 .row 的 computed height，如果不是你预期的值，就说明高度没传下来