在Bootstrap 3中有两种方法来居中列<div>:

方法1(偏移量):

第一种方法使用Bootstrap自己的偏移类，因此不需要更改标记，也不需要额外的CSS。关键是将偏移量设置为行剩余大小的一半。例如，一个大小为2的列的居中偏移量为5，即(12-2)/2。

在标记中，这看起来像:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

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

方法2(旧边距:auto)

您可以通过使用已验证的边距来居中任何列大小:0 auto;技术。你只需要处理Bootstrap的网格系统添加的浮动。我建议像下面这样定义一个自定义CSS类:

.col-centered{
    float: none;
    margin: 0 auto;
}

现在你可以将它添加到任何屏幕大小的任何列中，它将与Bootstrap的响应式布局无缝配合:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

注意:使用这两种技术，您都可以跳过.row元素，并将列置于.container中居中，但您会注意到实际列大小的最小差异，因为容器类中的填充。

更新:

由于v3.0.1 Bootstrap有一个名为center-block的内置类，它使用margin: 0 auto，但缺少float:none，因此您可以将其添加到CSS中，使其与网格系统一起工作。

因为我从不需要在.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

Bootstrap版本3有一个.text-center类。

只需添加这个类:

text-center

它只会加载这个样式:

.text-center {
    text-align: center;
}

例子:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>   

对于那些当你没有确切的数字来填充你的网格时，希望在屏幕上将列元素居中的人，我写了一小段JavaScript来返回类名:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

如果你有5个元素，你想在md屏幕上每行有3个元素，你可以这样做:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

记住，第二个参数必须能被12整除。

试试这个

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

你也可以使用其他col，比如col-md-2等等。