你可以通过使父容器伸缩并添加align-items来垂直对齐你的容器:

body {
  display:flex;
  align-items:center;
}

更新的钢笔

.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

重要!垂直中心相对于父节点的高度

如果要居中的元素的父元素没有定义 高度，没有垂直定心解决方案将工作!

现在，垂直居中…

引导5(更新2021年)

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

在flexbox的父行(row或d-flex)上使用align-items-center 在flexbox父列上使用justify-content-center (d-flex flex-column) 在灵活的父母身上使用my-auto

垂直中心在引导5

---

引导4

您可以使用新的flexbox & size实用程序使容器全高并显示:flex。这些选项不需要额外的CSS(除了容器的高度(即:html,body)必须是100%)。

选项1在flexbox child上对齐自中心

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://codeply.com/go/fFqaDe5Oey

选项2对齐-项目-中心在flexbox父(。行为display:flex;flex-direction:行)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/BumdFnmLuk

选项3在flexbox parent(。卡是显示:弯曲;弯曲方向:列)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/3gySSEe7nd

---

更多关于Bootstrap 4垂直定心

现在Bootstrap 4提供了flexbox和其他实用程序，有许多垂直方法 对齐。http://www.codeply.com/go/WG15ZWC4lf

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>

垂直中心使用汽车边际演示

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>

垂直中心不同高度列演示

看到这个Q/A到中心，但保持相同的高度

---

3 -垂直中心使用显示Utils:

Bootstrap 4具有可用于display:table、display:table-cell、display:inline等的显示utils。这些可以与垂直对齐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>

垂直中心使用显示Utils演示

更多的例子 <div>中的垂直中心图像 容器中垂直居中。排 <div>中的垂直中心和底部 垂直中心的子在父内 垂直中心全屏大屏幕

---

重要!我提到身高了吗?

记住，垂直居中是相对于父元素的高度。如果你想在整个页面居中，在大多数情况下，这应该是你的CSS…

body,html {
  height: 100%;
}

或者在父/容器上使用min-height: 100vh (Bootstrap 4.1+中的min-vh-100)。如果要将子元素置于父元素的居中。父节点必须具有已定义的高度。

还看到: 自举4中的垂直对齐 引导中心垂直和水平对齐

在Bootstrap 4 (beta)中，使用align-middle。参考Bootstrap 4关于垂直对齐的文档:

使用vertical-alignment改变元素的对齐方式 实用工具。请注意，垂直对齐只影响内联， 内联块、内联表和表单元格元素。 选择。align-baseline， .align-top， .align-middle， .align-bottom， .align-text-bottom和.align-text-top。

跟随引导课程帮助我解决了这个问题

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

Bootstrap 4.1.3中:

当我试图在容器>行>列旁边的h1标题中居中引导徽章时，这为我工作。

工作的是一些简单的css:

.my-valign-center {
  vertical-align: 50%;
}

or

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

因为以上这些对我都没用，所以我再加上一个答案。

目标:使用bootstrap 4 flexbox类在页面上垂直和水平对齐div。

第一步:设置最外层div的高度为100vh。这将高度设置为Veiwport高度的100%。如果你不这么做，其他什么都不管用。将它的高度设置为100%只是相对于父级，所以如果父级不是视口的全高，什么都不会起作用。在下面的例子中，我将Body设置为100vh。

步骤2:将容器div设置为带有d-flex类的flexbox容器。

步骤3:用justify-content-center类水平居中div。

第四步:用align-items-center将div垂直居中

第五步:运行页面，查看垂直和水平居中的div。

注意，在居中的div本身(子div)上没有需要设置的特殊类。

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

/*你必须添加高度100vh */

Center

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

我在Bootstrap 4.3.1中是这样做的:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

我已经试过了所有的答案，但发现这里是h-100和vh-100的区别 以下是我的解决方案:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

在你的div上使用.my-auto (bootstrap4) CSS类

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

这一行是魔术发生的地方<div class="col-md-6 my-auto">， my-auto将列的内容居中。在上面的代码示例中，您可能有一个可变大小的图像，并且需要将列中的文本与它对齐。

将你的内容放在一个100%高的flexbox容器中，即h-100。然后使用justify-content-center类对内容进行集中验证。

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

使用这个引导4个类:

Method1:

父:d表 和 子:d-table-cell & align-middle & text-center

eg:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

如果你想让父母圆:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

这两个自定义CSS类如下:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

最后的用法可以是这样的:

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

Method2: 你可以使用以下方法:

父项:h-100 d-table mx-auto 和 d-table-cell align-middle

Method3:

你可以使用以下方法:

父项:d-flex align-items-center

如果你想让内容水平居中:

父级:d-flex align-items-center justify-content-center

在Bootstrap 5中我们可以很容易地做到这一点。下面是一个对齐卡片的例子。我们只需要设置卡片宽度，然后其余设置都是使用bootstrap 5类。

<div class="container d-flex vh-100">
  <div class="row mx-auto">
    <div class="col align-self-center p-4">
      <div class="card rounded-3 shadow-sm p-3" style="width:400px">
        <div class="card-body">
          <h1>I'am centered vertically and horizontally</h1>
        </div>
      </div>
    </div>
  </div>
</div>

使用引导版本5或更高版本，使用下面的代码将内容水平和垂直居中。

<div class="vh-100 d-flex justify-content-center align-items-center">
  <h1>Centered horizontally and vertically!</h1>
</div>

对于所有Bootstrap版本2,3,4和5，只有两个自定义类适用于任何高度和宽度。

.d_tbl{ display:table; width:100%; height:200px; } .d_tblCel{ vertical-align: middle; display: table-cell; text-align: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="d_tbl" style="background-color:antiquewhite"> <div class="d_tblCel"> <h3>Centered horizontally and vertically</h3> <p>for all bootstrap versions with only two custom classes</p> </div> </div> </div> </body> </html>

Bootstrap 5和blazor web组件:

<div class="d-flex align-items-center justify-content-center min" style="height: 50vh">
<button class="btn btn-outline-success mx-2">Register</button>
<button class="btn btn-outline-primary mx-2" style="width:123.44px">Login</button></div>