如何使用 Twitter Bootstrap 获得居中的内容？
我正在尝试遵循一个非常基本的示例。使用 starter page and the grid system，我希望如下：
引导启动模板
示例文本。
...会产生居中的文本。
但是，它仍然出现在最左侧。我究竟做错了什么？
<center> 被弃用，取而代之的是 text-align: center，顺便说一下，这正是引导类 .text-center 包装的内容。
这是用于文本居中的（这就是问题所在）
有关其他类型的内容，请参阅 Flavien's answer。
更新：Bootstrap 2.3.0+ 答案
最初的答案是针对早期版本的引导程序。从 bootstrap 2.3.0 开始，您可以简单地为 div 赋予类 .text-center。
原始答案（2.3.0 之前）
您需要使用 text-align: center 定义 row 或 span12 这两个类之一。请参阅 http://jsfiddle.net/xKSUH/ 或 http://jsfiddle.net/xKSUH/1/
注意：这是 removed in Bootstrap 3。
Pre-Bootstrap 3，您可以像这样使用 CSS 类 pagination-centered：
<div class="span12 pagination-centered">
Centered content.
</div>
pagination-centered 类已经在 bootstrap.css（或 bootstrap.min.css）中，并且只有一条规则：
.pagination-centered{text-align:center;}
使用 Bootstrap 2.3.0。 只需使用类 text-center
.text-center 是此版本的正确解决方案。
我猜这里的大多数人实际上都在寻找居中整个div 的方法，而不仅仅是文本内容（这是微不足道的......）。
第二种在 HTML 中居中的方法（而不是使用 text-align:center）是拥有一个具有固定宽度和自动边距（左右）的元素。使用 Bootstrap，定义自动边距的样式是“容器”类。
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
看看这里的小提琴：http://jsfiddle.net/D2RLR/7788/
col-*offset-*。例如 <div class="col-10 offset-1"> 或 <div class="col-8 offset-2">
引导程序 5（2021 年更新）
Bootstrap 5 仍然使用 flexbox 网格布局，因此居中的工作方式相同。
文本中心到中心显示：内联元素（即：span，img）
mx-auto 用于在 flex 元素内居中
offset-* 或 mx-auto 可用于居中列 (.col-)
将内容中心对齐到行内的中心列（col-*）
引导程序 4
“居中的内容”可能意味着很多不同的东西，自最初的帖子以来，Bootstrap 居中已经发生了很大的变化。
水平中心
引导程序 3
text-center 用于 display:inline 元素
中心块到中心显示：块元素
col-*offset-* 使网格列居中
请参阅此答案以使导航栏居中
Demo Bootstrap 3 Horizontal Centering
引导程序 4
text-center 仍然用于 display:inline 元素
mx-auto 将 center-block 替换为 center display:block 元素
offset-* 或 mx-auto 可用于使网格列居中
justify-content-center in row 也可用于居中 col-*
mx-auto（自动 x 轴边距）将具有 已定义宽度、（%、vw、px 等）的 display:block 或 display:flex 元素居中. 默认使用弹性盒在网格列上，因此弹性盒居中方法也多种多样。
Demo Bootstrap 4 Horizontal Centering
现在 Bootstrap 4 默认为 flexbox，有许多不同的垂直对齐方法可以使用：auto-margins、flexbox utils 或 display utils 以及 vertical align utils。起初“垂直对齐工具”似乎很明显，但这些仅适用于内联和表格显示元素。以下是一些 Bootstrap 4 垂直居中选项。
1 - 使用自动边距垂直居中：
另一种垂直居中的方法是使用 my-auto。这将使元素在其容器中居中。例如，h-100 使行全高，而 my-auto 将使 col-sm-12 列垂直居中。
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
my-auto 表示垂直 y 轴上的边距，等效于：
margin-top: auto;
margin-bottom: auto;
2 - 带有 Flexbox 的垂直中心：
https://i.stack.imgur.com/gKaKI.png
由于 Bootstrap 4 .row 现在是 display:flex，您可以简单地在任何列上使用 align-self-center 使其垂直居中...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
或者，在整个 .row 上使用 align-items-center 将行中的所有 col-* 垂直居中对齐...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertical Center Different Height Columns Demo
3 - 使用 Display Utils 垂直居中：
Bootstrap 4 具有可用于 display:table、display:table-cell、display:inline 等的 display utils。这些可与 vertical alignment utils 一起使用以对齐内联、内联块或表格单元格元素。
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Vertical Center Using Display Utils Demo
.className-of-inner-div { display: inline-block; text-align: left; padding-top: 25%; padding-bottom: 20%; margin-top: auto; margin-bottom: auto; } .className-of-Grid-column { vertical-align:middle; text-align: center; }
Bootstrap 3.1.1 有一个用于使 div 居中的 .center-block 类。请参阅：http://getbootstrap.com/css/#helper-classes-center。
将内容块居中设置要显示的元素：通过边距阻止和居中。可作为 mixin 和 class 使用。
<div class="center-block">...</div>
或者，正如其他人已经说过的，使用 .text-center 类使文本居中。
最好的方法是定义一个 CSS 样式：
.centered-text {
text-align:center
}
然后在需要居中文本的地方添加它，如下所示：
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
或者，如果您只想将 p 标签居中：
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
您使用的内联 CSS 越少越好。
.show-grid 类在链接的示例中应用居中对齐的文本。
您始终可以将 style="text-align:center" 添加到您的行 div 或我认为的其他类中。
截至 2013 年 2 月，在某些情况下，我将“中心”类添加到“跨度”div：
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
和 CSS：
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
这样做的原因是因为 span* div 会浮动到左侧，并且“自动边距”居中技术仅在 div 不浮动时才有效。
演示（在 JSFiddle 上）：http://jsfiddle.net/5RpSh/8/embedded/result/
JSFiddle：http://jsfiddle.net/5RpSh/8/
如果您使用 Bootstrap 3，它还具有名为 .text-center 的内置 CSS 类。那正是你想要的。
<div class="text-left">
left
</div>
<div class="text-center">
center
</div>
<div class="text-right">
right
</div>
请参阅 jsfiddle 中的示例。 http://jsfiddle.net/ucheng/Q4Fue/
Bootstrap 2.3 有一个 text-center 类。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
就我而言，我定义了新的 CSS 样式，可供使用且易于记忆：
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;} /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}
这是个好主意吗？有什么好的做法吗？
span12 之类的东西树立了一个坏榜样
如果您使用的是 Bootstrap 2.0+
这可以使 div 以页面为中心。
<div class="row">
<div class="span4 offset4">
//your content here gets centered of the page
</div>
</div>
任何文本对齐实用程序类都可以解决问题。 Bootstrap 长期以来一直使用 .text-center 类来居中文本。
.text-center { text-align: center !important; }
或者您可以创建自己的实用程序。这些年来我看到的一些变化：
.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
您需要使用 .span 进行调整。
例子：
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
<!--/span-->
<div class="span4" align="center">
<div class="hero-unit" align="center">
<h3>Sign In</h3>
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i> </span>
<input class="span6" type="text" placeholder="Email address">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i> </span>
<input class="span6" type="password" placeholder="Password">
</div>
</form>
</div>
</div>
<!-- /span -->
<div class="span4"></div>
</div>
<!-- /row -->
</div>
我在保持响应性（移动兼容性）的同时将信息块居中的首选方法是在您希望居中的内容之前和之后放置两个空的 span1 div。
<div class="row-fluid">
<div class="span1">
</div>
<div class="span10">
<div class="hero-unit">
<h1>Reading Resources</h1>
<p>Read here...</p>
</div>
</div><!--/span-->
<div class="span1">
</div>
</div><!--/row-->
对于 Bootstrap 版本 3.1.1 及更高版本，使内容居中的最佳类是 .center-block 助手类。
<div class="container">
<div class="col-md-12 centered">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
label
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
请勿在主体中使用容器流体。
centered 类，这会造成很多混乱
中心块也是上述答案中未提及的选项
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
center-block 类所做的只是告诉元素的边距为 0 auto，auto 是左/右边距。但是，除非类 text-center 或 css text-align:center;设置在父元素上，元素不知道从哪一点开始计算这个自动计算，所以它不会像预期的那样居中。
所以 text-center 是一个更好的选择。
您可以使用以下任何一种类型
使用 Bootstrap 现有类文本中心。添加自定义样式，style = "text-align:center"。使用列偏移量：示例：
我创建了这个类来保持居中而不考虑屏幕大小，同时保持响应特性：
.container {
alignment-adjust: central;
}
只需为您想要的 div 或标签使用一个类 text-center。我认为它可能工作正常。它是文本居中对齐的 Bootstrap 类。
以下是一些文本对齐 Bootstrap 类：
text-left, text-right, text-justify, etc.
<div class="row">
<div class="col-md-12 text-center">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
我尝试了两种方法，将 div 居中效果很好。这两种方式都会在所有屏幕上对齐 div。
方式1：使用推送：
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
</div>
方式2：使用偏移量：
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>
结果：
https://i.stack.imgur.com/VPegx.png
解释
Bootstrap 将指定左侧，第一列的指定屏幕占用率。如果我们使用偏移量或推送，它会将“this”列移动“那些”许多列。尽管我在偏移响应方面遇到了一些问题，但推送很棒。
2018 年更新：
在 Bootstrap 4.1.3 中，可以使用类 mx-auto 使内容居中。
<div class="mx-auto">
Centered element
</div>
参考：https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
text-align: center不是这些类的默认值。通常默认为left对齐。.pagination-centered也可以：P 为您节省了添加另一个类的按键。pagination-centered要求您向 html 添加另一个类。我的 2.3.0 之前的答案只需要一个扩展已经存在的类的属性定义。此外，如果您使用pagination-centered查看对答案的评论，您会发现一些与此相关的反对意见和警告。但是，如果它对您有用，那就去吧！ :-)