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>   

使用mx-auto在你的div类使用Bootstrap 4。

<div class="container">
  <div class="row">
    <div class="mx-auto">
      You content here
    </div>
  </div>
</div>

别忘了加上!important。然后你可以确定元素真的会在中间:

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

更准确地说，Bootstrap的网格系统包含12列，为了将任何内容居中，例如，内容占用一列。需要占用Bootstrap网格的两列，并将内容放置在这两列的一半上。

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5'告诉网格系统从哪里开始放置内容。

'col-xs-2'告诉网格系统内容应该占据多少剩余列。

' centric '将是一个定义的类，它将内容居中。

下面是这个例子在Bootstrap的网格系统中的样子。

列:

1 | 2 | 3 | 4 5 6 7 | | | | | 8 9 10 11 | | | 12

.......offset....... .data. .......不习惯……

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </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>