这是关于文本居中的(这就是问题的内容)

关于其他类型的内容，请参阅Flavien的回答。

更新:引导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/

如果你使用Bootstrap 2.0+

这可以使div居中于页面。

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

Bootstrap 2.3有一个文本中心类。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

从2013年2月开始，在某些情况下，我在“span”div中添加了一个“centric”类:

<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/

引导5(更新2021年)

Bootstrap 5仍然使用flexbox网格布局，所以定心工作方式相同。

文本中心到中心显示:内联元素(即:span, img) Mx-auto用于在flex元素内定心 Offset -*或mx-auto可用于列居中(.col-) Justify-content-center到行内的居中列(col-*)

引导4

“以中心为中心的内容”可以有很多不同的含义，自最初的帖子以来，Bootstrap以中心为中心已经发生了很大的变化。

水平居中

引导3

文本中心用于显示:内联元素 从中心块到中心显示:块元素 Col -*offset-*到中心网格列 看到这个答案在导航栏中央

示范引导3水平定心

引导4

文本中心仍然用于显示:内联元素 Mx-auto将center-block替换为center display:block元素 Offset -*或mx-auto可用于网格列居中 row中的Justify-content-center也可以用来居中col-*

Mx-auto (auto x轴边距)将中心显示:块或显示:具有定义宽度的flex元素(%，vw, px等)。默认情况下，在网格列上使用Flexbox，因此也有各种Flexbox居中方法。

示范引导4水平定心

---

**Vertical Center** --

现在Bootstrap 4默认是flexbox，有许多不同的方法来使用垂直对齐:自动边距，flexbox utils，或显示utils和垂直对齐utils。起初，“垂直对齐utils”似乎显而易见，但这些只适用于内联和表格显示元素。这里有一些Bootstrap 4垂直定心选项。

---

1 - Vertical Center Using Auto Margins:

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<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 represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

---

2 - Vertical Center with Flexbox:

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

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

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

       <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 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<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

Bootstrap 3.1.1有一个.center-block类用于对div进行居中。见:http://getbootstrap.com/css/ helper-classes-center。

设置要显示的元素:通过页边距显示块和居中。可作为mixin和类使用。

<div class="center-block">...</div>

或者，正如其他人已经说过的，使用.text-center类将文本居中。