Bootstrap卡片标题默认不垂直居中是因为.card-header是普通块级元素，仅靠line-height或padding模拟居中，易受字体、图标等影响；唯一可靠解法是flex布局，需同时设display: flex和align-items: center。
Bootstrap卡片标题为啥默认不垂直居中
因为 .card-header 默认是普通块级元素，内部文字只靠 line-height 或 padding 模拟居中，一旦字体大小变化、行高不一致或加了图标，立刻错位。Flex 不是“更高级的方案”，而是唯一能真正响应内容高度、无视行高干扰的解法。
给.card-header加display: flex就完事了？
不够。只加 display: flex 会让文字贴左上角，必须配 align-items: center 才生效。但要注意：如果卡片标题里有按钮、徽章等内联元素，它们会和文字一起被居中——这通常是想要的效果；但如果用了 float 或 position: absolute 的子元素，flex 会失效，得先清理这些定位。
推荐写法：
.card-header {
display: flex;
align-items: center;
}
不需要 justify-content，除非你还想水平居中（那得改整个标题宽度）。
立即学习“前端免费学习笔记（深入）”；
为什么不能直接改Bootstrap源码或用!important
因为 Bootstrap 5+ 的 .card-header 已经带了 padding 和 border，硬塞 !important 容易破坏响应式断点下的间距逻辑。更稳妥的是用自定义类覆盖，比如：
<div class="card-header d-flex align-items-center">
——这里复用 Bootstrap 自带的 d-flex 和 align-items-center 工具类，不新增CSS，兼容性好，也不污染全局样式。
常见踩坑点：
- 在
.card-header里嵌套<h5>后又对h5单独设margin，flex容器会把 margin 当作布局依据，导致视觉偏移 - 用了
height: 100%但父容器没设高度，flex 的align-items: center就没参考系，表现和没写一样
IE11下flex居中失效怎么办
IE11 对 align-items 支持弱，尤其在 min-height 或 flex-direction: column 场景下容易塌陷。如果必须兼容 IE11，别依赖 flex 垂直居中，退回用 line-height = height 方案，但仅限单行文本：
.card-header {
height: 48px;
line-height: 48px;
}
多行文本 + IE11？基本无解，建议降级显示或加 JS 补丁。现在绝大多数项目已可安全放弃 IE11。
最常被忽略的一点：flex 居中只作用于“交叉轴”，也就是默认的垂直方向；如果你把 flex-direction 改成 row-reverse 或 column，align-items 对应的轴就变了，得同步检查方向逻辑。
