只需为你想要的div或标签使用一个类，text-center。我认为它可能会很好。它是一个用于文本对齐中心的引导类。

下面是一些文本对齐引导类:

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>

我创建了这个类来保持居中，无论屏幕大小，同时保持响应功能:

.container {
    alignment-adjust: central;
}

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

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

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

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

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

使用Bootstrap现有的类文本中心。 添加自定义样式，style = "text-align:center"。 使用列偏移量: 例如:<div class="col-md-offset-6 col-md-12"></div>

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

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

不要主要使用容器流体。