更准确地说，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. .......不习惯……

这不是我的代码，但它工作得很好(在Bootstrap 3上进行了测试)，而且我不必在冷偏移方面搞得一团糟。

演示:

/* centered columns styles */ .col-centered { display: inline-block; float: none; /* inline-block space fix */ margin-right: -4px; background-color: #ccc; border: 1px solid #ddd; } <div class="container"> <div class="row text-center"> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> </div> </div>

现在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; */
}

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

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

<div class="container">
  <div class="row">
    <div class="mx-auto">
      You content here
    </div>
  </div>
</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>