Bootstrap 4中使用<h>标签时，如何垂直居中卡片标题？

当然可以用Bootstrap 4原生类实现，不用写自定义CSS！问题出在你之前用的类不对路——align-middle是针对表格单元格布局的，而Bootstrap 4的垂直对齐主要靠flex布局体系来实现。

下面分几种常见场景给你具体的原生解决方案：

场景1：卡片头部（card-header）内的标题垂直居中 #

如果你的标题放在card-header里，且header有固定/最小高度，只需给card-header加上d-flex和align-items-center，再给h标签去掉默认的底部外边距（避免多余间距干扰布局）：

<div class="card" style="width: 18rem;">
  <div class="card-header d-flex align-items-center" style="min-height: 70px;">
    <h5 class="mb-0">垂直居中的卡片标题</h5>
  </div>
  <div class="card-body">
    <p class="card-text">这是卡片的内容区域，标题已经在头部垂直居中啦。</p>
  </div>
</div>

场景2：标题和其他元素（比如按钮）在卡片主体内并排垂直居中 #

如果标题和操作按钮等元素需要放在同一行，给父容器（比如card-body）加上d-flex align-items-center，再用justify-content-*类控制水平分布，同时去掉h标签的默认外边距：

<div class="card" style="width: 18rem;">
  <div class="card-body d-flex align-items-center justify-content-between">
    <h5 class="mb-0">垂直居中的标题</h5>
    <button class="btn btn-sm btn-primary">点击操作</button>
  </div>
  <div class="card-body">
    <p class="card-text">标题和按钮已经垂直对齐，水平方向两端分布。</p>
  </div>
</div>

另一种灵活方式：单独控制标题的垂直对齐 #

如果父容器里有多个子元素，只想让标题垂直居中，也可以给父容器加d-flex，然后给h标签单独加align-self-center：

<div class="card" style="width: 18rem;">
  <div class="card-header d-flex" style="min-height: 70px;">
    <h5 class="align-self-center mb-0">我是单独居中的标题</h5>
    <span class="ml-auto">右侧额外内容</span>
  </div>
</div>

核心逻辑就是：先把标题的父容器变成flex容器（d-flex），再用flex的垂直对齐类来控制，同时处理h标签的默认外边距（mb-0）避免布局错位。之前的align-middle不生效就是因为没用到flex布局体系~

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