HTML容器居中失效求助：如何实现容器居中对齐

你用的是Bootstrap栅格系统，针对你的col-md-8容器居中需求，有两种直接有效的解决方法：

方法1：使用offset偏移类 #

Bootstrap栅格总共有12列，col-md-8占据8列宽度，给它加上offset-md-2类，就能让容器左右各偏移2列，刚好实现水平居中：

<div class="row">
    <div class="col-md-8 offset-md-2" style="margin-top: 30px;">
        <div class="card" style="font-size: 100px; text-align: center; height: 100px;">
            <div class="card-body">
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-md-12">
                        <!-- 后续内容 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

方法2：给父级row添加对齐类 #

在最外层的row上添加justify-content-center类，这个类会让row内部的所有列自动水平居中，无需计算偏移量：

<div class="row justify-content-center">
    <div class="col-md-8" style="margin-top: 30px;">
        <div class="card" style="font-size: 100px; text-align: center; height: 100px;">
            <div class="card-body">
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-md-12">
                        <!-- 后续内容 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

注意事项 #

• 确认已正确引入Bootstrap CSS文件，否则栅格和对齐类无法生效。
• 你给card设置的text-align: center是卡片内部文本居中，和容器本身的水平居中是两个不同的设置，不要混淆。

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