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>   

Bootstrap 4解决方案:

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

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

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

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

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

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>   

在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中，使其与网格系统一起工作。