使用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，该类在容器内居中。如果有多个divs，我可能会使用一行，但是现在我只想要a
div，其大小以一列为中心位于容器内（12列）。
我也不确定上述方法是否足够好，因为其目的不是要抵消div一半。我不需要外部的自由空间，div并且内容的内容div按比例缩小。我想在div外部留出空间以使其均匀分布 （缩小直到容器宽度等于一列）。
有两种方法可以使<div>Bootstrap 3中的列居中：
方法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:0auto;。您只需要注意由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:0auto，但缺少float:none，因此可以将其添加到CSS中以使其与网格系统一起使用。
-
我有以下代码： 它只是在单个列中显示按钮。无论用户的分辨率如何，我都希望它是居中的。我试过使用offesets，但对于奇怪的分辨率它不起作用（例如分辨率是1366px)。我也尝试添加col-centered和margin：auto但没有成功。
-
问题内容： 我尝试了所有组合： 要么 已更改跨度和偏移量数字… 但是我无法得到一个完美地位于页面中央的简单盒子:( 我只想要一个6栏宽的盒子居中… 编辑： 做到了 但是盒子太宽了，我可以用span7做什么吗？ 在左侧提供额外的填充在右侧提供额外的填充… 问题答案： 除了通过减少像这样跨度的大小股利本身萎缩到你想要的大小，… ，等等......东西一样简单的DIV可以有你要找的效果 您不能将span
-
问题内容： 我想居中背景图像。没有使用div，这是CSS样式： 上面的CSS会全部平铺并将其居中，但是看不到一半的图像，只是向上移动了一点。我想做的就是将图像居中。我可以在21英寸的屏幕上观看图像吗？ 问题答案： background-image: url(path-to-file/img.jpg); background-repeat:no-repeat; background-position
-
问题内容： 输出： 我希望输出居中。如果我不使用’-‘标志，则输出将向右对齐。 我在API中找不到将文本居中的标志。 该文章有关于格式的一些信息，但没有对中心自圆其说。 问题答案： 我很快就搞定了。您现在可以在中使用。
-
我想要中心的div水平与一个选项滚动使用CSS。我怎样才能做到呢？我看到了一个解决方案使用边距自动和最大宽度，但div将被削减，所以我没有这样做。 null null
-
问题内容： 我有一个包含文本的div元素，并且我想将此div的内容垂直居中对齐。 这是我的div样式： 做这个的最好方式是什么？ 问题答案： 您可以尝试以下基本方法： 但是，它仅适用于一行文本，因为我们将行的高度设置为与包含框元素相同的高度。 更通用的方法 这是垂直对齐文本的另一种方法。此解决方案适用于一行和多行文本，但仍需要一个固定高度的容器： CSS只是通过设置的line-height等于其高