【问题标题】：Center a column using Twitter Bootstrap 3使用 Twitter Bootstrap 3 居中列
【发布时间】：2013-08-11 18:31:41
【问题描述】：

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

.centered {
  background-color: red;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

我想要一个div，其中一个类.centered 在容器内居中。如果有多个divs，我可能会使用一行，但现在我只想要一个div，其大小为容器中心的一列（12 列）。

我也不确定上述方法是否足够好，因为其目的不是将div 偏移一半。我不需要div 之外的空闲空间和div 的内容按比例缩小。我想将 div 外的空白空间均匀分布（缩小到容器宽度等于一列）。

【问题讨论】：

恕我直言，将话题限制在bootstrap3上，那是不合适的，尤其是bootstrap版本会越来越新，过去的版本只会对未来的人越来越没用，甚至无用。希望以后如果有人想更新答案，不会受此影响和限制。

标签： css twitter-bootstrap twitter-bootstrap-3 centering

【解决方案1】：

使用 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

【讨论】：

【解决方案2】：

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

Bootstrap 3.x centering examples

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

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

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

编辑 - 如 cmets 中所述，center-block 适用于列内容和 display:block 元素，但不适用于列本身 (@987654331 @divs) 因为 Bootstrap 使用 float。

2020 年更新

现在有了 Bootstrap 4，centering 方法已经改变..

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

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

Demo Bootstrap 4 Horizontal Centering

BS4 中的垂直居中见 https://stackoverflow.com/a/41464397/171456

【讨论】：

text-center 是为我工作的人Bootstrap v3.3.7

【解决方案3】：

<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;
}

【讨论】：

【解决方案4】：

Bootstrap 4解决方案：

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

【讨论】：

【解决方案5】：

使用 bootstrap 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>

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

在 .row 或 .col 中附加以下 sn-p。这适用于 Bootstrap 4*。

d-flex justify-content-center

【讨论】：

【解决方案8】：

请注意，如果您使用的是 Bootstrap 4，则可以在 row 中使用 .align-items-center，因为 Boostrap 4 现在使用 flex 系统。

【讨论】：

Re "flex system"：你的意思是CSS Flexbox？
@PeterMortensen 我的意思是getbootstrap.com/docs/4.0/layout/grid

【解决方案9】：

试试这个代码。

<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 等等。

【讨论】：

【解决方案10】：

我对中心列的处理方法是使用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/

【讨论】：

【解决方案11】：

您可以将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/

【讨论】：

【解决方案12】：

只需将以下内容添加到您的自定义 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>

【讨论】：

【解决方案13】：

在 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; 技术居中任何列大小。您只需要处理 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 以使其与网格系统一起使用。

【讨论】：

【解决方案14】：

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

演示：

/* 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>

【讨论】：

【解决方案15】：

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

机制是：

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

示例演示是here

【讨论】：

【解决方案16】：

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

justify-content: center;

可以使您的列居中。

查看flex。

【讨论】：

【解决方案17】：

更准确地说，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' 告诉网格系统内容应该占据多少剩余的列。

'centered' 将是一个已定义的类，它将使内容居中。

这是这个示例在 Bootstrap 的网格系统中的样子。

列：

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

.......偏移量............数据。 .......没用过........

【讨论】：

【解决方案18】：

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

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

【讨论】：

【解决方案19】：

试试这个

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

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

【讨论】：

【解决方案20】：

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

【讨论】：

【解决方案21】：

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

【讨论】：

【解决方案22】：

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>

【讨论】：

【解决方案23】：

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

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

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

【讨论】：

// row col-xs-2 col-center-block 工作得很好

【解决方案24】：

如果你把它放在你的行上，里面的所有列都会居中：

.row-centered {
    display: flex;
    justify-content: space-between;
}

【讨论】：

使元素无响应。

【解决方案25】：

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

【讨论】：

【解决方案26】：

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

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

【讨论】：

【解决方案27】：

只需将显示内容的一列设置为 col-xs-12（移动优先；-）并配置容器仅控制您希望居中内容的宽度，因此：

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

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

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

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

【讨论】：

【解决方案28】：

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

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

【讨论】：

【解决方案29】：

别忘了添加!important。然后您可以确定该元素确实位于中心：

.col-centered{
  float: none !important;
  margin: 0 auto !important;
}

【讨论】：

【解决方案30】：

这可能不是最好的答案，但对此还有另一种创造性的解决方案。正如 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，请注意你必须增加输出窗口的大小才能看到结果，否则列会换行。

【讨论】：

2020 年更新

HTML：

CSS：

方法 1（偏移量）：

方法2（旧margin:auto）

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

示例演示是here

方法2（旧`margin:auto`）