如何使用 Bootstrap2 使 div 居中？答案

【问题标题】：How to center a div with Bootstrap2?如何使用 Bootstrap2 使 div 居中？
【发布时间】：2012-03-12 01:59:15
【问题描述】：

http://twitter.github.com/bootstrap/scaffolding.html

我尝试了所有组合：

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

或

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

更改了跨度和偏移量...

但我无法在页面上得到一个完美居中的简单框:(

我只想要一个 6 列宽的框居中...

编辑：

用

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

但是盒子太宽了，有什么办法可以用 span7 做到吗？

span7 offset2 在左侧提供额外的填充 span7 offset3 在右侧提供额外的填充...

【问题讨论】：

您是否希望在页面上水平居中一个框？因为container 类已经这样做了，所以认为您可能希望将一个较小的框居中。或者您希望在页面上水平和垂直居中一个框？
你说的是盒子吗？ . . . .here 在开发者世界中，我们称之为 div
您使用的是哪个版本的 Bootstrap？它应该反映在标题中，因为查找此内容的人最终会在这里看到过时的代码。

标签： css twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

除了将 div 本身缩小到您想要的大小之外，通过像这样减小跨度大小...class="span6 offset3"、class="span4 offset4" 等...像 div 上的style="text-align: center" 这样简单的东西可能会对您产生影响'正在寻找

您不能将 span7 与任何设置的偏移量一起使用，并使跨度位于页面中心（因为总跨度 = 12）

【讨论】：

考虑 Zuhaib Ali 的回答。 text-align: center 不适用于
中的元素居中。 offset* 类并不是真正的居中组件。它只是在制造居中的错觉。您可以通过调整窗口大小并查看组件未保持居中来验证这一点。当您应用 Zuhaib Ali 的方法时，组件保持居中。
不要添加内联样式 (style="text-align:center")，而是添加类“center-block”并在居中的 div 中获取居中内容。
col-md-4 或 col-lg-4 等于一个边距：0 auto; ?

【解决方案2】：

听起来您只是想将单个容器居中对齐。引导框架可能过于复杂了一个例子，你可能有一个独立的 div 有你自己的样式，比如：

<div class="login-container">
  <!-- Your Login Form -->
</div>

和风格：

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

如果您嵌套在引导程序 .container div 中的某个位置，那应该可以正常工作。

【讨论】：

【解决方案3】：

添加类中心内容

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

【讨论】：

【解决方案4】：

Bootstrap 的跨度向左浮动。使它们居中所需的只是覆盖此行为。我通过将其添加到我的样式表来做到这一点：

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

如果您定义了此类，只需将其添加到 span 中即可。

<div class="span7 center"> box </div>

请注意，此自定义中心类必须在引导 css 之后定义。您可以使用!important，但不建议这样做。

【讨论】：

是的！谢谢你，祖海布！工作完美。这个答案应该被投票作为这个问题的正确答案。
@ZuhaibAli 添加float: none; 解决我的问题。
我使用的是Rails，所以我只想指出，在application.css中，添加*= require bootstrap.min before *= require_self和*= require_tree
这对我不起作用，但添加 display: table 似乎可以解决问题
很好的答案！从现在开始使用它。

【解决方案5】：

如果您想完全引导（而不是自动左/右方式），您需要一个适合 12 列的模式，例如2个空格，8个内容，2个空格。这就是这个设置要做的事情。它仅涵盖 -md- 变体，我倾向于通过添加 col-xs-12

将其捕捉到完整大小

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

【讨论】：

这是在 boostrap 中居中 div 的有效方法吗？
div的内容不是居中的，但是div本身是居中的。

【解决方案6】：

Bootstrap3 具有您可以使用的 .center-block 类。它被定义为

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

文档here。

【讨论】：

【解决方案7】：

@ZuhaibAli 代码对我来说有点用，但我做了一点改动：

我在css中创建了一个新类

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

那么div就变成了

<div class="center col-md-6"></div>

我为 div 本身的宽度添加了 col-md-6，在这种情况下，这意味着 div 是一半大小，引导程序中有 1 -12 col md。

【讨论】：

【解决方案8】：

遵循此指导https://getbootstrap.com/docs/3.3/css/

使用.center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

【讨论】：

【解决方案9】：

将 div 包装在具有 row 类的父 div 中，然后将样式 margin:0 auto; 添加到 div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>

【讨论】：