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

Question

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

.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之外的空白空间均匀分布（收缩直到容器宽度等于一列）。

Answer 1

在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中，使其与网格系统。

Answer 2

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

Bootstrap 3.x centering examples

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

您还可以将text-center用于中心文字（和内联元素）。

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

编辑 - 正如评论中所述，center-block适用于列内容和display:block元素，但不适用于列本身（col-* divs）因为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元素置于定义的宽度，（%，{ {1}}，vw等。）。默认情况下在网格列上使用Flexbox ，因此还有各种flexbox居中方法。

Demo Bootstrap 4 Horizontal Centering

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

Answer 3

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

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

Helper classes center

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

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

Answer 4

只需将以下内容添加到自定义CSS文件中即可。建议不要直接编辑Bootstrap CSS文件，并取消使用CDN的功能。

.center-block {
    float: none !important
}

<强>为什么吗

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

<强> PS ：

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

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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>

Answer 8

使用Bootstrap v4，只需将<input type="checkbox" name="details[]" value="1"> Module 1 <input type="checkbox" name="details[]" value="2"> Module 2 <input type="checkbox" name="details[]" value="3"> Module 3 <input type="checkbox" name="details[]" value="4"> Module 4 ....... <input type="checkbox" name="details[]" value="20"> Module 20添加到.justify-content-center .row

即可完成

<div>

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

Answer 9

这很有效。可能是一种hackish方式，但它很好用。测试了响应性（Y）。

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

Desktop

Responsive

Answer 10

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

Answer 11

只需将显示内容的一列设置为col-xs-12（mobile-first ;-)，并仅配置容器以控制您想要居中内容的宽度，所以：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 12

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

Answer 13

要使我们需要使用以下代码。 cols是除了margin auto之外的浮动元素。我们也将它设置为float none，

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

Answer 14

另一种抵消方法是有两个空行，例如：

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

Answer 15

这可能不是最佳答案，但还有一个更有创意的解决方案。正如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，请注意您必须增加输出窗口的大小，以便查看结果，否则列将会换行。

Answer 16

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

机制是：

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

示例演示为here

Answer 17

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

<强>演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 18

使用引导程序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>

Answer 19

正如koala_dev在他的方法1中所使用的那样，我更喜欢偏移方法而不是使用有限的中心块或边距，但正如他所提到的那样：

现在，这种方法有一个明显的缺点，它只适用于偶数列大小，所以只有.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>

Answer 20

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

justify-content: center;

可以使您的列居中。

查看 flex 。

Answer 21

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

Answer 22

对于那些希望将列元素置于屏幕中心的人，当你没有确切的数字来填充你的网格时，我写了一小段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分割。

Answer 23

试试这段代码。

<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，依此类推。

Answer 24

因为我永远不需要在.col-中只设置一个.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>

Answer 25

Bootstrap 4解决方案：

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

Answer 26

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

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

Answer 27

在.row或.col内添加以下代码段。这是用于Bootstrap 4 *。

d-flex justify-content-center

Answer 28

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

Answer 29

我建议只使用课程text-center：

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

Answer 30

更准确地说，Bootstrap的网格系统包含12列并以任何内容为中心，例如，内容占用一列。需要占用两列Bootstrap的网格，并将内容放在两个占用列的一半上。

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

＆＃39; COL-XS-偏移-5＆＃39;告诉网格系统从哪里开始放置内容。

＆＃39; COL-XS-2＆＃39;正在告诉网格系统内容占用剩余列的数量。

＆＃39;中心＆＃39;将是一个定义的类，将内容集中。

以下是Bootstrap网格系统中这个例子的样子。

列：

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

.......偏移.......。数据。 .......未使用........

Answer 31

方法1：

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            YOUR CONTENT
        </div>
    </div>
</div>

方法2：

CSS

.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>

Bootstrap提示，示例和工具：OnAirCode

Answer 32

试试这个

col-md-2

您可以使用其他curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer以及scanf()等

Answer 33

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

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

Answer 34

不要忘记添加!important。然后你可以确定元素真的会在中心：

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

Answer 35

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

使用Twitter Bootstrap 3将列居中

35 个答案:

方法1（抵消）：

方法2（旧`margin:auto`）

更新2018

HTML：

CSS：

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

示例演示为here

使用Twitter Bootstrap 3将列居中

35 个答案:

方法1（抵消）：

方法2（旧margin:auto）

更新2018

HTML：

CSS：

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

示例演示为here

方法2（旧`margin:auto`）