小开

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

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

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

小开

最佳答案

有两种方法可以在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中以使其与网格系统一起使用。

小开

这工作。可能是一种hackish方式，但它工作得很好。它被测试为响应式（Y）。

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

响应式

小开

定心柱的首选方法是使用“偏移”（即：col-md-offset-3）

Bootstrap 3. x居中示例

对于定心元件，有一个center-block助手类。

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

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

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

更新2020

现在有了bootstrap4，定心的方法已经改变了。

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

mx-auto（自动x轴边距）将在网格列上居中display:block或display:flex元素，这些元素具有定义宽度、（%、vw、px等）。

演示引导4水平对中

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

小开

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

.center-block {float: none !important}

为啥？

Bootstrap CSS（3.7及更低版本）使用保证金：0自动；，但它被size容器的浮点属性覆盖。

PS：

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

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

小开

现在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; */}

小开

为了使col-居中，我们需要使用下面的代码。除了边距自动之外，COL是浮动元素。我们还将其设置为浮动无，

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

小开

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

小开

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

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

超文本标记语言：

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

小开

因为我永远不需要在.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>

小开

只需将显示内容的一列设置为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：-）

小开

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

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

小开

Bootstrap版本3有一个. text中心类。

只需添加这个类：

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>

小开

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

小开

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

小开

这可能不是最好的答案，但有一个更有创意的解决方案。正如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>

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

小开

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

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

小开

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

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

小开

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

小开

试试这个

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

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

小开

要将Bootstrap行中的多个列居中-并且列的数量是奇数，只需将这个css类添加到该行中的所有列：

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lgdisplay:inline-block;float:none;}

所以在你的超文本标记语言中，你有这样的东西：

<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中。
使该div成为具有固定布局的表。
使每一列成为一个表格单元格。
使用垂直对齐属性来控制内容位置。

示例演示是这里

小开

试试这个代码。

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

小开

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

justify-content: center;

可以集中你的专栏。

检查flex。

小开

更准确地说，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-offate-5'告诉网格系统从哪里开始放置内容。

col-xs-2告诉网格系统内容应该占据多少剩余的列。

“居中”将是一个定义好的类，它将内容居中。

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

列：

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

………偏移…………数据………未使用………

小开

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

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

小开

这不是我的代码，但它工作得很好（在Bootstrap 3上进行了测试），我不必弄乱col-偏移。

演示：

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

小开

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

小开

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

小开

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

d-flex justify-content-center

小开

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

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

小开

bootstrap4解决方案：

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

小开

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

小开

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

使用Twitter Bootstrap 3将列居中