没有一个对我有用。但他的孩子做到了。

因为Bootstrap 4 .row类现在是display:flex，你可以简单地使用新的align-self-center flexbox实用程序在任何列上垂直居中:

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

我是从https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff上了解到的

引导程序具有文本中心来集中文本。例如

<div class="container text-center">

您可以更改以下内容

<div class="row justify-content-center align-items-center">

到以下

<div class="row text-center">

引导5(更新2021年)

Bootstrap 5仍然是基于flexbox的，因此垂直定心的工作方式与Bootstrap 4相同。例如，align-items-center (flex-direction: row)和justify-content-center (flex-direction: column)可以在flexbox父元素(row或d-flex)上使用。

Bootstrap 5中的居中示例

垂直中心(别忘了父节点必须有一个定义好的高度!):

My-auto用于在flex (.d-flex)元素内定心 My-auto可以用来居中列(.col-)在行 将-items-center对齐到行内的中心列(col-*)

水平中心:

从文本中心到中心显示:行内元素和列内容 Mx-auto用于在flex元素内定心 Mx-auto可用于将列(.col-)居中 Justify-content-center到行内的居中列(col-*)

Bootstrap 4.3+(2019年更新)

不需要额外的CSS。什么已经包括在Bootstrap将工作。确保表单的容器是全高的。引导4现在有一个h-100类100%高度…

垂直中心:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://codeply.com/go/raCutAGHre

以物品为中心的容器高度应为100% (或任何与居中物体相关的期望高度)

注意:当在任何元素上使用height:100%(百分比高度)时，该元素接受其容器的高度。在现代浏览器vh单位高度:100vh;可以用来代替%，以获得所需的高度。

因此，你可以设置html, body {height: 100%}，或者在容器上使用新的min-vh-100类而不是h-100。

水平中心:

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

垂直对齐引导中心 引导4全屏居中形式 引导4中心输入组 引导4水平+垂直中心全屏

引导的方式

超文本标记语言

 <div class="row top-row">
        <div class="col center-text">
            <H1>Center Text Horizantally and vertically</H1>
        </div>
</div>

自定义CSS

  .top-row{
        height: 300px; //It's important to set height 
    }
  .center-text{
       display: flex;
       align-items: center;
       justify-content: center;
    }

你需要一些东西来集中你的身体。但是因为你没有为你的html和body指定高度，它只会包装内容——而不是视口。换句话说，没有空间把物品放在中间。

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}

这对我来说很有用:

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>