Bootstrap 5 列内嵌套元素时无法正常垂直居中问题求助

问题根因 #

• Bootstrap内置样式中<p>标签默认带有margin-bottom: 1rem的下边距，这个边距会导致列底部出现多余空白，还可能触发外边距塌陷影响对齐效果。
• align-items-center是相对父容器高度生效的，你当前的列高度默认由内容本身撑开，容器高度和内容高度一致时看不出垂直居中效果；如果不同列内容高度不一致，就会出现明显的对齐异常。

解决步骤 #

1. 清除<p>标签的默认边距：给所有嵌套的<p>标签添加Bootstrap内置的mb-0类，移除默认下外边距即可解决多余空白问题。
2. 调整对齐规则：把垂直对齐类加在.row容器上，统一控制所有列的对齐效果，不需要单独给每个列重复加flex对齐类；如果需要单独控制某一列内部的元素居中，再给对应列加d-flex align-items-center justify-content-center类，同时按需设置列的高度（比如加h-100类配合父容器高度）。

修正后完整代码示例 #

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<!-- 给row设置高度+align-items-center即可看到明显的垂直居中效果，实际使用时可按需调整高度规则 -->
<div class="row align-items-center" style="height: 200px;">
  <div class="col border">
    <p class='bg-primary text-white mb-0'>Column</p>
  </div>
  <div class="col border">
    <p class='bg-primary text-white mb-0'>Column<br>多行内容测试</p>
  </div>
  <div class="col border">
    <p class='bg-primary text-white mb-0'>Column</p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者RiskItAll