使用 Twitter Bootstrap 3 居中列

在 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）

您可以使用经过验证的 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 Bootstrap 有一个名为 center-block 的内置类，它使用 margin: 0 auto，但缺少 float:none，您可以将其添加到您的 CSS 以使其与网格系统一起使用。

---

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

Bootstrap 3.x centering examples

对于居中元素，有一个 center-block helper class。

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

响应式演示：http://bootply.com/91632

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

2020 年更新

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

text-center 仍然用于 display:inline 元素

mx-auto 将 center-block 替换为 center display:block 元素

offset-* 或 mx-auto 可用于使网格列居中

mx-auto（自动 x 轴边距）将具有 已定义宽度、（%、vw、px 等）的 display:block 或 display:flex 元素居中. 默认使用弹性盒在网格列上，因此弹性盒居中方法也多种多样。

Demo Bootstrap 4 Horizontal Centering

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

---

现在 Bootstrap 3.1.1 正在与 .center-block 一起使用，并且此帮助程序类与列系统一起使用。

引导程序 3 Helper Class Center。

请检查this 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>

https://i.stack.imgur.com/bHg4V.png

使用 col-center-block 辅助类的行列中心。

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

---

只需将以下内容添加到您的自定义 CSS 文件中。不建议直接编辑 Bootstrap CSS 文件，这会取消您使用 CDN 的能力。

.center-block {
    float: none !important
}

为什么？

Bootstrap CSS（3.7 及更低版本）使用 margin: 0 auto;，但它被 size 容器的 float 属性覆盖。

PS：

添加这个类后，不要忘记按正确的顺序设置类。

<div class="col-md-6 center-block">Example</div>

---

Bootstrap 3 现在有一个用于此 .center-block 的内置类

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

如果您仍在使用 2.X，那么只需将其添加到您的 CSS 中。

---

我对中心列的方法是将 display: inline-block 用于列，将 text-align: center 用于容器父级。

您只需将 CSS 类“居中”添加到 row。

HTML：

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS：

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle： http://jsfiddle.net/steyffi/ug4fzcjd/

---

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 v3 和 v4，只需将 .justify-content-center 添加到 .row <div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

---

这行得通。可能是一种骇人听闻的方式，但效果很好。它已针对响应性 (Y) 进行了测试。

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

https://i.stack.imgur.com/dGRBO.png

https://i.stack.imgur.com/tvMEA.png

---

使用引导程序 4，您可以简单地尝试 justify-content-md-center，因为它提到了 here

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

https://i.stack.imgur.com/D1VEf.jpg

---

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

---

为了使 col- 居中，我们需要使用下面的代码。 cols 是除margin auto 之外的浮动元素。我们还将它设置为不浮动，

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

要将上述 col-lg-1 与居中类居中，我们将编写：

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

要使 div 内的内容居中，请使用 text-align:center，

.centered {
    text-align: center;
}

如果您只想将其集中在桌面和更大的屏幕上，而不是在移动设备上，请使用以下媒体查询。

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

并且要将 div 仅在移动版本上居中，请使用以下代码。

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

---

只需将显示内容的一列设置为 col-xs-12 (mobile-first ;-) 并将容器配置为仅控制您希望居中内容的宽度，因此：

.container { 背景颜色：蓝色； } .centered { 背景颜色：红色； }

有关演示，请参阅 http://codepen.io/Kebten/pen/gpRNMe :-)

---

偏移的另一种方法是有两个空行，例如：

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

---

您可以将 text-center 用于该行，并确保内部 div 具有 display:inline-block（而不是 float）。

作为：

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

和 CSS：

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

小提琴：http://jsfiddle.net/DTcHh/3177/

---

这可能不是最好的答案，但对此还有另一种创造性的解决方案。正如 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>

请参阅this fiddle，请注意您必须增加输出窗口的大小才能看到结果，否则列会换行。

---

这不是我的代码，但它可以完美运行（在 Bootstrap 3 上测试），我不必乱用 col-offset。

演示：

/* 居中列样式 */ .col-centered { display: inline-block;浮动：无； /* 行内块空间修复 */ margin-right: -4px;背景颜色：#ccc；边框：1px 实心#ddd； }

---

在 .row 或 .col 中附加以下代码段。这适用于 Bootstrap 4*。

d-flex justify-content-center

---

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

机制是：

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

示例演示在这里

https://i.stack.imgur.com/bxBZP.png

---

正如 koala_dev 在他的方法 1 中使用的那样，我更喜欢 offset 方法而不是使用有限的 center-block 或 margins，但正如他所提到的：

现在，这种方法有一个明显的缺点，它只适用于偶数列，所以只有 .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 4 在您的 div 类中使用 mx-auto。

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

---

引导程序 4 解决方案：

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

---

因为我从不需要在 .row 中仅将单个 .col- 居中，所以我在目标列的包装 .row 上设置了以下类。

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

例子

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

---

对于那些在没有确切数字来填充网格时希望在屏幕上居中列元素的人，我编写了一小段 JavaScript 来返回类名：

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

如果您有 5 个元素，并且希望在 md 屏幕上每行有 3 个，您可以这样做：

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

请记住，第二个参数必须能被 12 整除。

---

要在 Bootstrap 行中居中多列 - 并且列数是奇数，只需将此 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>

---

尝试这个

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

您可以使用其他 col 以及 col-md-2 等。

---

我建议简单地使用类 text-center：

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

---

您可以在 Bootstrap 中使用非常灵活的解决方案 flexbox。

justify-content: center;

可以使您的列居中。

查看flex。

---

试试这个代码。

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

这里我使用了 col-lg-1，偏移量应该为 10，以便在大型设备上正确居中 div。如果您需要它以中型到大型设备为中心，那么只需将 lg 更改为 md 等等。

---

<div class="container">
    <div class="row row-centered">
        <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>

CSS

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
    text-align: center;
    background-color: #ccc;
    border: 1px solid #ddd;
}

https://i.stack.imgur.com/jZuRL.png

---