因为我从不需要在.row中仅居中一个.col-，所以我将以下类设置为目标列的.row的包装。

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

例子

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

居中列的首选方法是使用“偏移量”(即:col-md-offset-3)

引导3。X定心示例

对于居中元素，有一个居中块助手类。

您还可以使用文本中心到文本中心(以及内联元素)。

响应式演示:http://bootply.com/91632

编辑-正如评论中提到的，center-block适用于列内容和display:block元素，但不适用于列本身(col-* divs)，因为Bootstrap使用float。

更新2020

现在与Bootstrap 4，定心方法已经改变..

文本中心仍然用于显示:内联元素 Mx-auto将center-block替换为center display:block元素 Offset -*或mx-auto可用于网格列居中

Mx-auto (auto x轴边距)将中心显示:块或显示:具有定义宽度的flex元素(%，vw, px等)。默认情况下，在网格列上使用Flexbox，因此也有各种Flexbox居中方法。

示范引导4水平定心

有关BS4的垂直定心，请参阅https://stackoverflow.com/a/41464397/171456

正如koala_dev在他的方法1中使用的那样，我更喜欢offset方法，而不是使用有限的center-block或margin方法，但正如他提到的:

现在，这种方法有一个明显的缺点，它只适用于相同大小的列，因此只支持.col- x -2， .col- x -4, col-X-6, col-X-8和col-X-10。

对于奇数列，可以使用以下方法求解。

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

这不是我的代码，但它工作得很好(在Bootstrap 3上进行了测试)，而且我不必在冷偏移方面搞得一团糟。

演示:

/* centered columns styles */ .col-centered { display: inline-block; float: none; /* inline-block space fix */ margin-right: -4px; background-color: #ccc; border: 1px solid #ddd; } <div class="container"> <div class="row text-center"> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> </div> </div>

将下面的代码片段添加到.row或.col中。这是Bootstrap 4*。

d-flex justify-content-center

注意，如果你正在使用Bootstrap 4，你可以在你的行中使用.align-items-center，因为Bootstrap 4现在使用flex系统。