【问题标题】：How to center the element at the same time keep the size in bootstrap?如何使元素居中同时保持引导大小？
【发布时间】：2015-02-09 11:39:34
【问题描述】：

目前我有这样的布局：

<div class="row">
    <?php
    foreach ($card_list as $key => $card) {
        echo '<div class="col-xs-4 col-sm-3 col-md-3">';
        echo '</div>';
    }
    ?>
</div>

这会生成一张这样的卡片，如果大小是md

box1 box2 box3 box4

但是，由于 <div class="col-xs-4 col-sm-3 col-md-3"> 是 fix ，如果例如我只有 3 盒。由于盒子的数量是动态的，我可以将盒子的中心放在数字上吗？如果我只有 3 个

offset box1  box2  box3 offset

代替

 box1  box2  box3  empty area

感谢您的帮助。

【问题讨论】：

只用类容器包裹一个div
尝试添加这个 css .row {display:table; margin : 0 auto}
尝试添加css，但左右两边都有padding？

标签： jquery html css twitter-bootstrap styles

【解决方案1】：

在 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（旧边距：auto）

您可以通过使用经过验证的margin: 0 auto; 技术居中任何列大小，您只需要注意由 Bootstrap 的网格系统添加的浮动。我建议定义一个自定义 CSS 类，如下所示：

.col-centered{
float: none;
margin: 0 auto;
}

现在您可以将它添加到任何屏幕大小的任何列大小，并且它将与 Bootstrap 的响应式布局无缝协作： 注意： 使用这两种技术，您都可以跳过 .row 元素并让列在 .container 内居中，但您会注意到由于容器类中的填充，实际列大小的差异很小.

更新： 从 v3.0.1 开始，Bootstrap 有一个名为 center-block 的内置类，它使用 margin: 0 auto 但缺少 float:none。您可以将其添加到您的 CSS 以使其与网格系统一起使用。

【讨论】：