我使用引导程序，并试图像这样将div(span7(居中：
<div class="row-fluid">
<div id="main" class="span7">
Lorem ipsum dolor sit amet
</div>
</div>
我的CSS代码是：
#main{
margin:0px auto;
}
但它并没有设置在中心。如何设置居中？
编辑
span7 现在在 Bootstrap 4 中col-7，并且不推荐使用行流体(取而代之的是使用 container-fluid 和 row (。
Twitter的引导.span类都浮动在左侧，因此它们不会以通常的方式居中。因此，如果您希望它居中您的span只需将float:none添加到您的#main规则中即可。
.CSS
#main {
margin:0 auto;
float:none;
}
顺便说一下，如果你的span类是偶数(例如 span8 (，您可以添加一个 offset 类来使其居中 – 对于span8，这将是offset2的(假设默认的 12 列网格(，对于span6，它将是offset3的，依此类推(基本上，如果从网格中的列总数中减去 span -number，则剩余列数的一半(。
更新Bootstrap 3 重命名了很多类，因此所有span*类都应该col-md-*，offset类应该col-md-offset-*，假设你使用的是中型响应网格。
我在这里创建了一个快速演示，希望对您有所帮助：http://codepen.io/anon/pen/BEyHd。
如果有人想要使用引导行流体在跨度内将图像和文本居中的真正解决方案，这里是(如何实现这一点，解释遵循我的例子(：
.css
div.row-fluid [class*="span"] .center-in-span {
float: none;
margin: 0 auto;
text-align: center;
display: block;
width: auto;
height: auto;
}
.html
<div class="row-fluid">
<div class="span12">
<img class="center-in-span" alt="MyExample" src="/path/to/example.jpg"/>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<p class="center-in-span">this is text</p>
</div>
</div>
用法：要使用此 css 使图像在范围内居中，只需将 .center-in-span 类应用于 img 元素，如上所示。
要使用此 css 使文本在范围内居中，只需将 .center-in-span 类应用于 p 元素，如上所示。
解释：这个 css 之所以有效，是因为我们正在覆盖特定的引导样式。与发布的其他答案的显着区别在于宽度和高度设置为自动，因此您不必使用固定的with(适用于动态网页(。此外，将边距设置为自动、文本对齐：居中和显示：块的组合可以同时处理图像和段落。
让我知道这是否足够彻底以便于实施。
更新
从BS3开始，有一个.center-block的帮助程序类。从文档中：
// Classes
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as mixins
.element {
.center-block();
}
这个看似简单的问题隐藏着复杂性。所有给出的答案都存在一些问题。
1. 创建自定义类(主要陷阱(
创建.col-centred类，但有一个主要问题。
.col-centred {
float: none !important;
margin: 0 auto;
}
<!-- Bootstrap 3 -->
<div class="col-lg-6 col-centred">
Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 col-centred">
Centred content.
</div>
陷阱
引导程序要求列加起来最多 12 列。如果他们不这样做，它们就会重叠，这是一个问题。 在这种情况下，居中的列将与其上方的列重叠。从视觉上看，页面可能看起来相同，但鼠标事件不适用于重叠的列(例如，您不能悬停或单击链接(。这是因为鼠标事件在与您尝试单击的元素重叠的居中列上注册。
修复
您可以使用 clearfix 元素解决此问题。使用 z-index 将居中列置于底部将不起作用，因为它本身会重叠，因此鼠标事件将对其进行处理。
<div class="row">
<div class="col-lg-12">
I get overlapped by `col-lg-7 centered` unless there's a clearfix.
</div>
<div class="clearfix"></div>
<div class="col-lg-7 centred">
</div>
</div>
或者，您可以将居中的列隔离在其自己的行中。
<div class="row">
<div class="col-lg-12">
</div>
</div>
<div class="row">
<div class="col-lg-7 centred">
Look I am in my own row.
</div>
</div>
2. 使用 col-lg-offset-x 或 spanx-offset (主要陷阱(
<!-- Bootstrap 3 -->
<div class="col-lg-6 col-lg-offset-3">
Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 span-offset-3">
Centred content.
</div>
第一个问题是居中的列必须是偶数，因为偏移值必须均匀除以 2 才能使布局居中(左/右(。
其次，正如一些人评论的那样，使用偏移量是一个坏主意。这是因为当浏览器调整大小时，偏移量将变成空白区域，从而将实际内容推到页面下方。
3. 创建内部居中列
在我看来，这是最好的解决方案。根据解决方案 1 和 2，无需黑客攻击，您也不会弄乱网格，这可能会导致意想不到的后果。
.col-centred {
margin: 0 auto;
}
<div class="row">
<div class="col-lg-12">
<div class="centred">
Look I am in my own row.
</div>
</div>
</div>
将宽度定义为 960px，或任何您喜欢的宽度，您就可以开始了！
#main {
margin: 0 auto !important;
float: none !important;
text-align: center;
width: 960px;
}
(在我修复宽度之前，我无法弄清楚这一点，其他方法都不起作用。