正如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>

只需将以下内容添加到自定义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>

另一种抵消的方法是有两个空列，例如:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

要在Bootstrap行中居中多个列-并且cols的数量是奇数，只需将这个css类添加到该行中的所有列:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

所以在你的HTML中，你有这样的东西:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

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

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

如果你把它放在你的行上，里面的所有列都将居中:

.row-centered {
    display: flex;
    justify-content: space-between;
}