概述
本文翻译自：Center a column using Twitter Bootstrap 3
How do I center a div of one column size within the container (12 columns) in 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> I want a div , with a class .centered to be centered within the container. 我想要一个div ，其中一个.centered类位于容器内的中心位置。 I may use a row if there are multiple div s, but for now I just want a div with the size of one column centered within the container (12 columns). 如果有多个div ，我可以使用一行，但是现在我只想要一个div ，其大小以一列为中心位于容器内（12列）。
I am also not sure the above approach is good enough as the intention is not to offset the div by half. 我也不确定上述方法是否足够好，因为其目的不是将div偏移一半。 I do not need free spaces outside the div and the contents of the div shrink in proportion. 我不需要自由空间外div和内容div按比例缩小。 I want to empty space outside the div to be evenly distributed (shrink till the container width is equal to one column). 我想在div外部留出空间以使其均匀分布 （缩小直到容器宽度等于一列）。
#1楼
参考：https://stackoom.com/question/1EAU6/使用Twitter-Bootstrap-将列居中
#2楼
Bootstrap 3 now has a built-in class for this .center-block Bootstrap 3现在具有用于此.center-block的内置类
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
If you are still using 2.X then just add this to your CSS. 如果您仍在使用2.X，则只需将其添加到CSS中即可。
#3楼
There are two approaches to centering a column <div> in Bootstrap 3: 有两种方法可以使Bootstrap 3中的列<div>居中：
Approach 1 (offsets): 方法1（偏移）：
The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. 第一种方法使用Bootstrap自己的偏移量类，因此不需要更改标记，也不需要额外的CSS。 The key is to set an offset equal to half of the remaining size of the row . 关键是将偏移量设置为等于行剩余大小的一半 。 So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2 . 因此，例如，大小为2的列将通过添加偏移量5（即(12-2)/2居中。
In markup this would look like: 在标记中，它看起来像：
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Now, there's an obvious drawback for this method. 现在，此方法有一个明显的缺点。 It only works for even column sizes , so only .col-X-2 , .col-X-4 , col-X-6 , col-X-8 , and col-X-10 are supported. 它仅适用于偶数列大小 ，因此仅支持.col-X-2 ， .col-X-4 ， col-X-6 ， col-X-8和col-X-10 。
Approach 2 (the old margin:auto ) 方法2（旧margin:auto ）
You can center any column size by using the proven margin: 0 auto; 您可以使用已证明的margin: 0 auto;将任何列大小居中 margin: 0 auto; technique. 技术。 You just need to take care of the floating that is added by Bootstrap's grid system. 您只需要注意由Bootstrap的网格系统添加的浮动即可。 I recommend defining a custom CSS class like the following: 我建议定义一个自定义CSS类，如下所示：
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size, and it will work seamlessly with Bootstrap's responsive layout: 现在，您可以将其添加到任何屏幕尺寸的任何列尺寸，并且它将与Bootstrap的响应式布局无缝协作：
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Note: With both techniques you could skip the .row element and have the column centered inside a .container , but you would notice a minimal difference in the actual column size because of the padding in the container class. 注意：两种方法都可以跳过.row元素，并使列居中位于.container内部，但是由于容器类中的填充，您会注意到实际列大小的最小差异。
Update: 更新：
Since v3.0.1 Bootstrap has a built-in class named center-block that uses margin: 0 auto , but is missing float:none , you can add that to your CSS to make it work with the grid system. 由于v3.0.1 Bootstrap具有一个名为center-block的内置类，该类使用margin: 0 auto ，但缺少float:none ，因此可以将其添加到CSS中以使其与网格系统一起使用。
#4楼
This works. 这可行。 A hackish way probably, but it works nicely. 可能是一种骇人听闻的方式，但是效果很好。 It was tested for responsive (Y). 测试了响应性（Y）。
.centered {
background-color: teal;
text-align: center;
}
#5楼
The preferred method of centering columns is to use "offsets" (ie: col-md-offset-3 ) 使列居中的首选方法是使用“偏移量”（即： col-md-offset-3 ）
Bootstrap 3.x centering examples Bootstrap 3.x居中示例
For centering elements , there is a center-block helper class . 对于居中元素 ，有一个center-block 帮助器类 。
You can also use text-center to center text (and inline elements). 您还可以使用text-center来居中文本 （和内联元素）。
Demo : http://bootply.com/91632 演示 ： 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 . 编辑 -如评论中所述， center-block适用于列内容和display:block元素，但不适用于列本身（ col-* divs），因为Bootstrap使用float 。
Update 2018 更新2018
Now with Bootstrap 4 , the centering methods have changed.. 现在有了Bootstrap 4 ， 居中方法已更改。
-
text-centeris still used fordisplay:inlineelementstext-center仍用于display:inline元素 -
mx-autoreplacescenter-blockto centerdisplay:blockelementsmx-auto将center-block替换为中心display:block元素 -
offset-*ormx-autocan be used to center grid columnsoffset-*或mx-auto可用于居中网格列
mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width , ( % , vw , px , etc..). mx-auto （自动x轴边距）将display:block或display:flex元素居中，这些元素具有定义的width （ % ， vw ， px等）。 Flexbox is used by default on grid columns, so there are also various flexbox centering methods. 默认情况下 ， Flexbox用于网格列，因此，还有多种flexbox居中方法。
Demo Bootstrap 4 Horizontal Centering 演示 Bootstrap 4水平居中
For vertical centering in BS4 see https://stackoverflow.com/a/41464397/171456 有关BS4中的垂直居中的信息，请参见 https://stackoverflow.com/a/41464397/171456
#6楼
Simply add the following to your custom CSS file. 只需将以下内容添加到您的自定义CSS文件即可。 Editing Bootstrap CSS files directly is not recommended and cancels your ability to use a CDN . 不建议直接编辑Bootstrap CSS文件，这会取消您使用CDN的能力。
.center-block {
float: none !important
}
Why? 为什么？
Bootstrap CSS (version 3.7 and lower) uses margin: 0 auto; Bootstrap CSS（3.7及更低版本）使用margin：0 auto; , but it gets overridden by the float property of the size container. ，但会被size容器的float属性覆盖。
PS : PS ：
After you add this class, don't forget to set classes by the right order. 添加此类后，不要忘记按正确的顺序设置类。
<div class="col-md-6 center-block">Example</div>
最后
以上就是酷炫世界为你收集整理的使用Twitter Bootstrap 3将列居中的全部内容，希望文章能够帮你解决使用Twitter Bootstrap 3将列居中所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复