Bootstrap网格卡片内容居中问题求助：自定义类添加无效

首先你代码里犯了个基础错误：同一个HTML元素不能写多个class属性，比如你的<i>标签和<p>标签都重复写了class属性，浏览器只会识别第一个，后面的class="center"直接被忽略了，这是你加了居中类没效果的核心原因之一。

结合Bootstrap的特性，给你两种实用的解决方法：

方法1：用Bootstrap内置工具类（推荐） #

Bootstrap自带text-center类，专门用来实现文本、行内/行内块元素的水平居中。你可以直接给卡片容器加这个类，一次性让所有内容居中：

<div class="col">
    <div class="card text-center">
        <i class="fa fa-medkit fa-5x" aria-hidden="true"></i>
        <div class="card-body">
            <h5 class="card-title">Allied Health</h5>
            <p class="card-text"></p>
        </div>
    </div>
</div>

如果只想让特定元素（比如图标）单独居中，给该元素加text-center的同时，要额外加d-block把行内元素转为块级元素：

<i class="fa fa-medkit fa-5x text-center d-block" aria-hidden="true"></i>

方法2：自定义.center类（如果坚持用自己的类） #

先把元素的多个class合并到一个属性里，再确保你的CSS正确定义了居中规则：

修正后的HTML： #

<div class="col">
    <div class="card">
        <i class="fa fa-medkit fa-5x center" aria-hidden="true"></i>
        <div class="card-body">
            <h5 class="card-title center">Allied Health</h5>
            <p class="card-text center"></p>
        </div>
    </div>
</div>

对应的CSS： #

.center {
    text-align: center;
    /* 若为块级元素需水平居中，可追加 margin: 0 auto; */
}

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