使用Twitter Bootstrap 3将列居中
如何在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之外的空白空间均匀分布（收缩直到容器宽度等于一列）。
35 个答案:
答案 0 :(得分：1881)
在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中，使其与网格系统。
答案 1 :(得分：278)
居中列的首选方法是使用“抵消”（即：col-md-offset-3）
Bootstrap 3.x centering examples
对于居中元素，有一个center-block helper class。
您还可以将text-center用于中心文字（和内联元素）。
编辑 - 正如评论中所述，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
答案 2 :(得分：92)
现在Bootstrap 3.1.1正在使用.center-block，这个助手类可以与列系统一起使用。
Bootstrap 3 Helper Class Center。
<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; */
}
答案 3 :(得分：54)
只需将以下内容添加到自定义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>
答案 4 :(得分：39)
Bootstrap 3 现在有一个内置类.center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
如果您仍在使用2.X，则只需将其添加到CSS中。
答案 5 :(得分：34)
我对中心列的处理方法是对列使用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/
答案 6 :(得分：25)
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>
答案 7 :(得分：20)
使用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
答案 8 :(得分：14)
这很有效。可能是一种hackish方式，但它很好用。测试了响应性（Y）。
.centered {
background-color: teal;
text-align: center;
}
答案 9 :(得分：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
}
答案 10 :(得分：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： - ）
答案 11 :(得分：6)
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<img src="some.jpg">
</div>
</div>
</div>
答案 12 :(得分：5)
要使我们需要使用以下代码。 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;
}
}
答案 13 :(得分：5)
另一种抵消方法是有两个空行，例如：
<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
答案 14 :(得分：5)
这可能不是最佳答案，但还有一个更有创意的解决方案。正如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，请注意您必须增加输出窗口的大小，以便查看结果，否则列将会换行。
答案 15 :(得分：4)
我们可以通过使用表格布局机制来实现这一点：
机制是：
- 将所有列包装在一个div中。
- 将该div设为具有固定布局的表格。
- 将每列作为表格单元格。
- 使用vertical-align属性控制内容位置。
示例演示为here
答案 16 :(得分：4)
这不是我的代码，但它完美运行（在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>
答案 17 :(得分：3)
使用引导程序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>
答案 18 :(得分：3)
正如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>
答案 19 :(得分：3)
答案 20 :(得分：2)
要使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>
答案 21 :(得分：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分割。
答案 22 :(得分：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，依此类推。
答案 23 :(得分：2)
因为我永远不需要在.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>
答案 24 :(得分：1)
Bootstrap 4解决方案：
<div class="container">
<div class="row">
<div class="col align-self-center">
Column in the middle, variable width
</div>
</div>
</div>
答案 25 :(得分：1)
使用Bootstrap 4在您的div类中使用mx-auto。
<div class="container">
<div class="row">
<div class="mx-auto">
You content here
</div>
</div>
</div>
答案 26 :(得分：1)
在.row或.col内添加以下代码段。这是用于Bootstrap 4 *。
d-flex justify-content-center
答案 27 :(得分：1)
<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;
}
答案 28 :(得分：1)
我建议只使用课程text-center：
<body class="container">
<div class="col-md-12 text-center">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
答案 29 :(得分：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>
＆＃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
.......偏移.......。数据。 .......未使用........
答案 30 :(得分：1)
方法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
答案 31 :(得分：1)
试试这个
col-md-2您可以使用其他curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer
以及scanf()等
答案 32 :(得分：1)
如果你把它放在你的行上，那么里面的所有列都将居中：
.row-centered {
display: flex;
justify-content: space-between;
}
答案 33 :(得分：0)
不要忘记添加!important。然后你可以确定元素真的会在中心：
.col-centered{
float: none !important;
margin: 0 auto !important;
}
答案 34 :(得分：-1)
请注意，如果您使用的是Bootstrap 4，则可以在.align-items-center中使用row，因为Boostrap 4现在使用flex系统。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？