Bootstrap5下h-100类p标签如何实现按钮式文字垂直居中

适配场景：Bootstrap 5栅格row内等高列场景，同时提供原生工具类、自定义CSS两种实现方案。

方案1：Bootstrap 5原生工具类实现（无额外CSS） #

Bootstrap 5内置了完整的flex布局工具类，直接给p标签追加对应类即可，不需要写任何自定义样式：

• d-flex：将默认块级的p标签转换为flex弹性容器
• align-items-center：让容器内的文本内容沿垂直轴居中
• 可选：如果需要文本同时水平居中，追加justify-content-center类即可
• 建议追加mb-0：清除p标签默认的下边距，避免和栅格间距产生样式冲突

完整示例代码：

<div class="row">
  <div class="col-6">
    <p class="bg-secondary w-100 h-100 d-flex align-items-center mb-0">Text A</p>
  </div>
  <div class="col-6">
    <p class="bg-secondary w-100 h-100 d-flex align-items-center mb-0">Much more involved text that wraps to multiple lines on small mobile screens</p>
  </div>
</div>

方案2：自定义CSS类实现（适合高频复用场景） #

如果项目中多处需要该效果，可以自定义通用CSS类减少重复class书写：

/* 等高块内容垂直居中通用类 */
.equal-height-vcenter {
  display: flex;
  align-items: center;
  /* 如需文本水平居中，取消下面一行的注释即可 */
  /* justify-content: center; */
}

使用示例代码：

<div class="row">
  <div class="col-6">
    <p class="bg-secondary w-100 h-100 equal-height-vcenter mb-0">Text A</p>
  </div>
  <div class="col-6">
    <p class="bg-secondary w-100 h-100 equal-height-vcenter mb-0">Much more involved text that wraps to multiple lines on small mobile screens</p>
  </div>
</div>

实现原理说明 #

你之前用的按钮能自动实现内容垂直居中，本质是Bootstrap的btn类默认就自带了display: inline-flex、align-items: center属性，和上面两种方案的实现逻辑完全一致。
注意：不要通过给元素设置和高度相等的line-height模拟垂直居中，该方案在文本换行显示为多行时会出现行间距异常，flex布局是适配单/多行文本场景的最优解。

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