如何使用Bootstrap2将div居中？

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额外的填充在右侧提供额外的填充...

除了通过减少像这样跨度的大小股利本身萎缩到你想要的大小，... class="span6 offset3"，class="span4 offset4"等等......东西一样简单style="text-align: center"的DIV可以有你要找的效果

您不能将span7与任何设置的偏移量一起使用，而不能使span居中显示在页面上（因为总spans = 12）

引导程序的跨度浮动到左侧。使它们居中的所有方法都将覆盖此行为。我通过将其添加到样式表中来做到这一点：

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

如果您定义了此类，只需将其添加到范围中就可以了。

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

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

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

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

文档在这里。

如果要完全引导（而不是自动左右移动），则需要一种适合12列的模式，例如2个空白，8个内容，2个空白。这就是此设置将要执行的操作。它仅涵盖-md-变体，我倾向于通过添加col-xs-12将其缩放为小尺寸

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

听起来就像您只是想将单个容器居中对齐。引导框架可能会使一个示例复杂化，您可能只有一个具有自己样式的独立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) */
}

如果您嵌套在引导.containerdiv中的某处，那应该可以正常工作。

添加课程中心内容

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

@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。

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

使用 .center-block

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

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

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