1204

如何在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 之外留出空间以均匀分布（缩小到容器宽度等于一列）。

4

34 回答 34

2030

<div>在 Bootstrap 3 中有两种方法可以使列居中：

方法 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元素并使列居中在 a 内.container，但是由于容器类中的填充，您会注意到实际列大小的最小差异。

更新：

center-block由于 v3.0.1 Bootstrap 有一个名为uses的内置类margin: 0 auto，但缺少float:none，您可以将其添加到您的 CSS 以使其与网格系统一起使用。

于 2013-08-09T18:45:24.400 回答
314

The preferred method of centering columns is to use "offsets" (ie: col-md-offset-3)

Bootstrap 3.x centering examples

For centering elements, there is a center-block helper class.

You can also use text-center to center text (and inline elements).

Responsive Demo: http://bootply.com/91632

EDIT - As mentioned in the comments, center-block works on column contents and display:block elements, but won't work on the column itself (col-* divs) because Bootstrap uses float.

Update 2020

Now with Bootstrap 4, the centering methods have changed..

  • text-center is still used for display:inline elements
  • mx-auto replaces center-block to center display:block elements
  • offset-* or mx-auto can be used to center grid columns

mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.

Demo Bootstrap 4 Horizontal Centering

For vertical centering in BS4 see https://stackoverflow.com/a/41464397/171456

于 2013-12-03T18:12:59.237 回答
100

现在 Bootstrap 3.1.1 正在使用.center-block，并且这个助手类与列系统一起使用。

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

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
于 2014-03-18T06:31:52.607 回答
58

只需将以下内容添加到您的自定义 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>
于 2013-12-15T03:12:45.393 回答
39

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

于 2015-02-16T10:27:02.107 回答
39

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

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

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

于 2013-08-09T18:39:37.343 回答
26

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>
于 2015-07-16T14:20:15.690 回答
22

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

于 2018-06-25T02:57:38.683 回答
15

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

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

桌面

响应式

于 2013-08-09T21:47:05.643 回答
8

使用 bootstrap 4，您可以简单地尝试这里justify-content-md-center提到的

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

在此处输入图像描述

于 2019-06-09T15:51:05.153 回答
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
于 2016-11-03T13:23:50.517 回答
6

为了使 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;
    }
}
于 2014-04-13T04:02:23.637 回答
6

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

于 2015-01-13T08:39:43.510 回答
6

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

.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 :-)

于 2015-06-13T13:14:27.810 回答
6

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

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
于 2015-07-02T14:27:30.063 回答
5

这不是我的代码，但它可以完美运行（在 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>

于 2018-04-19T09:22:07.400 回答
5

这可能不是最好的答案，但对此还有另一种创造性的解决方案。正如 koala_dev 所指出的，列偏移仅适用于偶数列大小。但是，通过嵌套行，您也可以实现不均匀列的居中。

坚持原来的问题，您希望在 12 的网格中将 1 列居中。

  1. 通过偏移 5 来将 2 列居中
  2. 制作一个嵌套行，这样您就可以在 2 列中获得新的 12 列。
  3. 由于您想将 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>

看到这个小提琴，请注意你必须增加输出窗口的大小才能看到结果，否则列会换行。

于 2016-03-02T05:35:36.703 回答
5

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

d-flex justify-content-center
于 2018-12-31T06:44:44.067 回答
4

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

机制是：

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

示例演示在这里

在此处输入图像描述

于 2017-03-30T13:37:30.160 回答
3

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

justify-content: center;

可以使您的列居中。

查看flex。

于 2017-11-06T08:45:17.577 回答
3

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

<div class="container">
  <div class="row">
    <div class="mx-auto">
      You content here
    </div>
  </div>
</div>
于 2019-03-17T20:24:34.767 回答
3

引导程序 4解决方案：

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
于 2019-05-03T08:39:10.760 回答
3

正如 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>
于 2015-09-16T11:55:10.670 回答
2

因为我从来不需要.col-在 a 中只居中一个，所以我在目标列.row的包装上设置了以下类。.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>
于 2015-04-27T21:41:44.020 回答
2

试试这个代码。

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

于 2017-08-24T16:43:45.130 回答
2

尝试这个

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

您可以使用 othercol以及 likecol-md-2等。

于 2017-03-08T06:46:06.890 回答
2

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

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
于 2018-03-30T06:53:30.283 回答
2

要在 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>
于 2017-03-29T13:27:09.527 回答
2

对于那些在没有确切数字来填充网格时希望在屏幕上居中列元素的人，我编写了一小段 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 整除。

于 2015-09-06T21:29:13.467 回答
2 
<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;
}

在此处输入图像描述

于 2020-09-24T08:20:18.737 回答
1

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

.row-centered {
    display: flex;
    justify-content: space-between;
}
于 2016-08-16T19:59:53.037 回答
1

更准确地说，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

....偏移量........数据。.......不曾用过........

于 2017-12-29T12:24:40.607 回答
0

不要忘记添加!important. 然后您可以确定该元素确实位于中心：

.col-centered{
  float: none !important;
  margin: 0 auto !important;
}
于 2016-06-24T09:30:28.837 回答
-1

注意如果你使用的是 Bootstrap 4，你可以.align-items-center在你的rowas Boostrap 4中使用现在使用的 flex 系统。

于 2018-11-29T06:19:01.997 回答