如何使用 Twitter Bootstrap 获得居中的内容？答案

【解决方案1】：

这是用于文本居中的（这就是问题所在）

有关其他类型的内容，请参阅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/

【讨论】：

我在行和 span12 上都试过这个，但我的表在 span12 内，行内总是在左边。添加填充将其移至中心，但我想以响应方式将其居中。我可以以某种方式进行自动填充吗？
我知道这是可行的，但为什么我们需要定义它。这些还没有定义吗？我只是在谈论文本......
@AkshatJiwanSharma - 类已定义，但最后我查看，text-align: center 不是这些类的默认值。通常默认为left 对齐。
对于 2.3.0 之前的版本，.pagination-centered 也可以使用：P 为您节省了添加另一个类的按键操作。
@Sarim：实际上，pagination-centered 要求您在 html 中添加另一个类。我的 pre-2.3.0 答案只需要一个扩展已经存在的类的属性定义。此外，如果您使用pagination-centered 查看答案中的 cmets，您会发现一些与此相关的反对意见和警告。但是，如果它对您有用，那就去吧！ :-)

【解决方案2】：

注意：这是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

【讨论】：

我不建议使用它作为它非常特定于分页（从类名推断）。它可能与您在分页上应用的样式发生冲突，并且如果 bootstrap 决定此类需要为居中分页做更多工作，则可能与未来的更新不兼容。
@lurii.k 这让一切都集中，包括儿童。如果我们只想对齐外部容器但里面的所有内容都向左对齐怎么办？
使用引导程序 2.3.0。只需使用 css 类 .text-center
迄今为止最好的答案！使用引导程序 2.3.2
Bootstrap 3.0.0 似乎已经移除了这个类。在父级上使用.text-center 是此版本的正确解决方案。

【解决方案3】：

我想这里的大多数人实际上是在寻找将整个div居中的方法，而不仅仅是文本内容（这是微不足道的......）。

在 HTML 中使事物居中的第二种方法（而不是使用 text-align:center）是拥有一个具有固定宽度和自动边距（左右）的元素。使用 Bootstrap，定义自动边距的样式是“容器”类。

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

看看这里的小提琴：http://jsfiddle.net/D2RLR/7788/

【讨论】：

这是正确的答案，官方记录在这里：twitter.github.com/bootstrap/scaffolding.html#layouts
@Qlimax 您的链接似乎已损坏，我认为这是您想要的 2.3.2：getbootstrap.com/2.3.2/scaffolding.html#layouts
@Sebastialonso 我刚刚修复了已弃用的依赖项，感谢您报告问题
如果您想使列居中，这将不起作用。要使网格列居中，请使用col-*offset-*。例如<div class="col-10 offset-1"> 或<div class="col-8 offset-2">

【解决方案4】：

引导程序 5（2021 年更新）

Bootstrap 5 仍然使用 flexbox 网格布局，因此居中的工作方式相同。

text-center 居中 display:inline 元素（即：span、img）
mx-auto 用于在 flex 元素中居中
offset-* 或 mx-auto 可用于居中列 (.col-)
justify-content-center 到row 内的中心列 (col-*)

引导程序 4

“居中的内容”可以表示很多不同的意思，自最初发布以来，Bootstrap 居中已经发生了很大变化。

水平中心

引导程序 3

text-center 用于display:inline 元素
center-block 居中 display:block 元素
col-*offset-* 将网格列居中
请参阅this answer 以使导航栏居中

Demo Bootstrap 3 Horizontal Centering

引导程序 4

text-center 仍用于 display:inline 元素
mx-auto 将 center-block 替换为居中 display:block 元素
offset-* 或 mx-auto 可用于居中网格列
justify-content-center in row 也可以用来居中col-*

mx-auto（自动 x 轴边距）将居中 display:block 或 display:flex 具有定义宽度的元素、（%、vw、px 等..)。 默认使用弹性盒在网格列上，因此弹性盒居中方法也多种多样。

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 垂直居中：

由于 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 - 使用显示工具的垂直居中：

Bootstrap 4 具有display utils，可用于display:table、display:table-cell、display:inline 等。这些可以与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

【讨论】：

当使用网格布局时，我发现只有以下css组合才能水平和垂直对齐列内的div，以便列的最大高度也匹配同一行中的最大列。 .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; }
如果可以的话，我会为每个演示投票。他们真棒。 :) 非常感谢！

【解决方案5】：

Bootstrap 3.1.1 有一个 .center-block 用于使 div 居中的类。请参阅：http://getbootstrap.com/css/#helper-classes-center。

居中内容块将元素设置为display: block 并通过margin 居中。可作为 mixin 和 class 使用。

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

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

【讨论】：

【解决方案6】：

最好的方法是定义一个 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 越少越好。

【讨论】：

很好，我用它来使 Bootstrap 模态页脚中的按钮居中。

【解决方案7】：

.show-grid 类在链接的示例中应用居中对齐的文本。

您始终可以将style="text-align:center" 添加到您的行 div 或我认为的其他类中。

【讨论】：

像这样添加内联样式通常被认为是不好的做法
我同意，这就是为什么我也说“或其他类”:)

【解决方案8】：

截至 2013 年 2 月，在某些情况下，我会在“span”div 中添加一个“centered”类：

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

【讨论】：

这是最好的答案，因为它的 div 居中并且它仍然是响应式的。这是演示的小提琴。答案中的那个不起作用：jsfiddle.net/r7Qgn/6

【解决方案9】：

如果您使用 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/

【讨论】：

【解决方案10】：

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>

【讨论】：

不，这仅适用于文本，问题是关于主容器
“问题是关于主容器”我不明白你为什么这么说（并看到接受的答案）

【解决方案11】：

在我这边，我定义了新的 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;}

这是个好主意吗？有什么好的做法吗？

【讨论】：

滑坡。 css 应该从文档结构中消除样式问题。这些，尽管是间接的，将它们加回来。也许 TBS 用他们的span12s 之类的东西树立了一个坏榜样
我同意滑坡评论。我还要补充一点，使用 Twitter Bootstrap 本身可以说是一个滑坡。

【解决方案12】：

如果您使用的是 Bootstrap 2.0+

这可以使 div 以页面为中心。

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

【讨论】：

这不会使元素居中。它将元素的左上角向前放置 4 列。 centering 表示将元素的确切中心放在容器元素的中心。

【解决方案13】：

任何文本对齐实用程序类都可以解决问题。 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; }

【讨论】：

不是一个好的设计，因为拉左和拉右会影响给定类的元素。你定义的 pull-center 会影响元素的子元素。

【解决方案14】：

您需要使用.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>

【讨论】：

【解决方案15】：

在保持响应性（移动兼容性）的同时将信息块居中的首选方法是在您希望居中的内容之前和之后放置两个空的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-->

【讨论】：

【解决方案16】：

对于 Bootstrap 3.1.1 及更高版本，使内容居中的最佳类是 .center-block 辅助类。

【讨论】：

是的，现在非常主题，用户使用大于 3.1.1 的引导版本

【解决方案17】：

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

不要在 main 中使用 container-fluid。

【讨论】：

你的代码中有一个centered 类，会造成很多混乱
有趣的方法，但对于我特定的 webform css，这是一个不错的选择。

【解决方案18】：

Center-block 也是上述答案中未提及的选项

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

center-block 类所做的只是告诉元素的边距为 0 auto，auto 是左/右边距。但是，除非类 text-center 或 css text-align:center;设置在父元素上，元素不知道从哪一点开始计算这个自动计算，所以它不会像预期的那样居中。

所以 text-center 是一个更好的选择。

【讨论】：

【解决方案19】：

您可以使用以下任何一种类型

使用 Bootstrap 现有类text-center。
添加自定义样式，style = "text-align:center"。
使用列偏移：

例如：<div class="col-md-offset-6 col-md-12"></div>

【讨论】：

【解决方案20】：

我创建了这个类来保持居中而不考虑屏幕大小，同时保持响应特性：

.container {
    alignment-adjust: central;
}

【讨论】：

【解决方案21】：

只需为您想要的 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>

【讨论】：

【解决方案22】：

我尝试了两种方法，都可以很好地使 div 居中。这两种方式都会对齐所有屏幕上的 div。

方式一：使用推送：

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

结果：

说明

Bootstrap 将指定左侧，第一列的指定屏幕占用。如果我们使用偏移量或推送，它会将“this”列移动“那些”许多列。尽管我在 offset 的响应性方面遇到了一些问题，但 push 还是很棒的。

【讨论】：

【解决方案23】：

2018 年更新：

在Bootstrap 4.1.3 中，可以使用类mx-auto 使内容居中。

<div class="mx-auto">
  Centered element
</div>

参考：https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering

【讨论】：