使用 Twitter Bootstrap 3 将列居中

如何在Twitter Bootstrap 3中将容器中的一个列大小的 div（12 列）居中？

.centered {
  background-color: red;
}

<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

我想要一个div ，一个类.centered在容器中居中。如果有多个div ，我可以使用一行，但是现在我只想要一个在容器中居中的一列大小的div （12 列）。

我也不确定上述方法是否足够好，因为意图不是将div抵消一半。我不需要外界自由空间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（旧`margin:auto` ）

您可以使用已证明的margin: 0 auto;将任何列大小居中 margin: 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 引导程序有一个名为center-block的内置类，它使用margin: 0 auto ，但缺少float:none ，你可以将它添加到 CSS 中，使其与网格系统一起使用。

使列居中的首选方法是使用 “偏移”（即： col-md-offset-3 ）

Bootstrap 3.x 居中示例

对于居中元素 ，有一个center-block 辅助类。

您还可以使用text-center来居中文本 （和内联元素）。

演示： http ： //bootply.com/91632

编辑 - 正如评论中所提到的， center-block适用于列内容和display:block元素，但不会对列本身（ col-* div）起作用，因为 Bootstrap 使用float 。

更新 2018 年

现在使用Bootstrap 4 ，中心方法已经改变了..

text-center仍用于display:inline元素
mx-auto将center-block替换为中心display:block元素
offset-* 或 mx-auto可用于居中网格列

mx-auto （自动 x 轴边距）将居中display:block或display:flex具有已定义宽度的 display:flex元素（ % ， vw ， px等）。 默认情况下 ， Flexbox在网格列上使用，因此还有各种 flexbox 居中方法。

演示 Bootstrap 4 水平居中

有关 BS4 中的垂直居中，请参阅 https://stackoverflow.com/a/41464397/171456

现在 Bootstrap 3.1.1 正在使用.center-block ，这个帮助程序类可以与列系统一起使用。

Bootstrap 3 Helper Class Center 。

请检查这个 jsfiddle DEMO ：

<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辅助类的行列中心。

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

答案

方法 1（抵消）：

方法 2（旧margin:auto ）

更新 2018 年

方法 2（旧`margin:auto` ）