极客观点
项目管理
HarmonyOS
如何在 Twitter Bootstrap 3 中的容器（12 列）中将一列大小的 div 居中？
.centered {
background-color: red;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
我想要一个 div ，其类 .centered 在容器内居中。如果有多个 div s，我可以使用一行，但现在我只想要一个 div 一个列的大小在容器内居中（12列）。
我也不确定上述方法是否足够好，因为其目的不是将 div 偏移一半。我不需要 --- 之外的空闲空间和 div div 的内容按比例缩小。我想 在 div 之外留出空间以均匀分布（缩小到容器宽度等于一列）。
原文由 bsr 发布，翻译遵循 CC BY-SA 4.0 许可协议
在 Bootstrap 3 中，有两种方法可以使列
<div>居中：方法 1（偏移量）：
第一种方法使用 Bootstrap 自己的偏移类，因此它不需要更改标记，也不需要额外的 CSS。关键是 设置偏移量等于行剩余大小的一半。例如，大小为 2 的列将通过添加偏移量 5 来居中，即
(12-2)/2。在标记中，这看起来像：
现在，这种方法有一个明显的缺点。 It only works for even column sizes , so only
.col-X-2,.col-X-4,col-X-6,col-X-8, andcol-X-10支持。方法 2（旧的
margin:auto）您可以使用经过验证的
margin: 0 auto;技术来 居中任何列大小。您只需要处理 Bootstrap 的网格系统添加的浮动即可。我建议定义一个自定义 CSS 类，如下所示：现在您可以将它添加到任何屏幕大小的任何列大小，并且它将与 Bootstrap 的响应式布局无缝协作：
注意： 使用这两种技术，您可以跳过
.row元素并将列居中在.container内，但是您会注意到实际列大小的微小差异，因为容器类。更新：
由于 v3.0.1 Bootstrap 有一个名为
center-block的内置类，它使用margin: 0 auto，但缺少float:none，您可以将其添加到您的 CSS 中使用网格系统。