对于那些当你没有确切的数字来填充你的网格时，希望在屏幕上将列元素居中的人，我写了一小段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整除。

只需将以下内容添加到自定义CSS文件。不建议直接编辑引导CSS文件，这会取消您使用CDN的能力。

.center-block {
    float: none !important
}

Why?

Bootstrap CSS(3.7及更低版本)使用margin: 0 auto;，但它会被size容器的float属性覆盖。

PS:

添加该类后，不要忘记按正确的顺序设置类。

<div class="col-md-6 center-block">Example</div>

你可以使用文本中心的行，并可以确保内部divs有display:inline-block(与不浮动)。

As:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

和CSS:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

小提琴: http://jsfiddle.net/DTcHh/3177/

现在Bootstrap 3.1.1使用.center-block，这个helper类使用列系统。

引导3辅助课程中心。

请检查这个jsfiddle演示:

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

行列中心使用中心点-中心点-块助手类。

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

居中列的首选方法是使用“偏移量”(即: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

这个作品。这可能是一种粗鄙的方式，但效果很好。它被测试为响应性(Y)。

.centered {
    background-color: teal;
    text-align: center;
}