使用Twitter Bootstrap 3中心列
如何在Twitter Bootstrap 3中将一列大小的div居中置于容器内（12列）。
请看起动器小提琴。
<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外部空白空间以均匀分布 （收缩直到容器宽度==一列）。
在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: 0 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，使其与网格系统一起工作。
对列进行居中的首选方法是使用“偏移”（即： col-md-offset-3 ）
Bootstrap 3.x居中示例
为了居中元素 ，有一个center-block助手类。
您还可以使用text-center来居中文本 （和内联元素）。
演示 ：http：//bootply.com/91632
编辑 - 正如评论中所提到的， center-block处理列内容和display:block元素，但不能在列本身（ col-* divs）上工作，因为Bootstrap使用float 。
2018年更新
现在自举4， 定心加工方法已经改变..
text-center仍然用于display:inline元素 mx-auto将center-block替换为中心display:block元素 offset-*或mx-auto可用于居中网格列 mx-auto （自动x轴边距）将居中display:block或display:flex具有定义宽度的display:flex元素（ % ， vw ， px等）。 Flexbox在网格列上默认使用 ，因此也有各种Flexbox居中方法。
演示 Bootstrap 4水平居中
有关BS4中的垂直居中，请参阅 https://stackoverflow.com/a/41464397/171456
现在Bootstrap 3.1.1与.center-block一起工作，并且此辅助类可与列系统一起使用。
Bootstrap 3助手类中心。
请检查这个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>
行列中心使用col-center-block帮助程序类。
.col-center-block {
float: none;
display: block;
margin: 0 auto;
/* margin-left: auto; margin-right: auto; */
}