将下面的代码片段添加到.row或.col中。这是Bootstrap 4*。

d-flex justify-content-center

Bootstrap 4解决方案:

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

这可能不是最好的答案，但有一个更有创意的解决方案。正如koala_dev所指出的，列偏移只适用于相等的列大小。然而，通过嵌套行，您也可以实现居中不均匀的列。

坚持最初的问题，你想要在12个网格中居中一列1。

将2的列居中，使其偏移5 创建一个嵌套行，这样在2列中就有了新的12列。 因为你想要居中1列，而1是2的“一半”(我们在步骤1中居中)，现在你需要在嵌套行中居中一个6列，这很容易通过偏移3来实现。

例如:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

看到这里，请注意，你必须增加输出窗口的大小，以便太看到结果，否则列将自动换行。

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

这不是我的代码，但它工作得很好(在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>

我们可以通过使用表布局机制来实现这一点:

其机理为:

将所有列包装在一个div中。 将该div作为一个具有固定布局的表格。 将每一列作为一个表格单元格。 使用垂直对齐属性来控制内容位置。

示例演示在这里