bootstrap中的card设置了height之后文字就不居中了，怎么办？

Question

如图设置了一个height之后，card的文字就不居中了，这是为什么，应该怎么处理呢？

Answer 1

原始的 height 和 line-height 这两个 css 属性值应该是一样的（注：这两个属性一样的时候视觉上就是水平居中的）
你修改之后变成了 height: 30px, 但是 line-height 不是 30，最简单的解决办法就是 flex 布局

.card-body {
    display:flex;
    align-items:center;
}

Answer 2

heigth:30px;
line-height:30px;

或者

display:flex;
align-items:center;

Answer 3

bootstrap 是靠两个 padding 把元素挤到中间的，你自己设定高度肯定不居中了，你要么用 flex 布局，要么设置行高

.card-body {
    display:flex;
    align-items:center;
}

heigth:30px;
line-height:30px;