Important！垂直方向の中心は、親のheightに相対的
センタリングしようとしている要素の親にheightが定義されていない場合、noneの垂直センタリングソリューションが機能します！
次に、Bootstrap 4の垂直方向の中央に...
新しい flexbox＆sizeユーティリティ を使用して、containerをフルハイトにし、display: flexにすることができます。これらのオプション余分なCSSは必要ありません（コンテナ（つまり：html、body）の高さが100％でなければならないことを除く）。
オプション1 align-self-center on 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://www.codeply.com/go/fFqaDe5Oey
オプション2 align-items-center on flexbox parent（.rowはdisplay:flex; flex-direction:row）
<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://www.codeply.com/go/BumdFnmLuk
オプション3 justify-content-center on flexbox parent（.cardはdisplay:flex;flex-direction:column）
<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://www.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>
または、align-items-center全体で.rowを使用して、行のすべての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>
-ディスプレイユーティリティを使用した垂直方向の中心：
ブートストラップ4には、 display utils があり、display:table、display:table-cell、display:inlineなどに使用できます。これらは 垂直配置で使用できます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>
その他の例<div>の垂直中央画像
。containerの垂直中央の行<div>の垂直方向の中央と下部
親の中の垂直中央の子
垂直中央フルスクリーンジャンボトロン
重要！高さについて言及しましたか？
垂直方向のセンタリングは、親の高さ要素に相対的であることを忘れないでください。ページ全体を中心にしたい場合、ほとんどの場合、これはCSSになります...
body,html {
height: 100%;
}
または、親/コンテナでmin-height: 100vh（Bootstrap 4.1+のmin-vh-100）を使用します。子要素を親の中央に配置する場合。親には、定義済みのheightが必要です。
親コンテナをフレックスにしてalign-items:centerを追加することで、コンテナを垂直方向に整列させることができます。
body {
display:flex;
align-items:center;
}
ブートストラップ4クラスに従うことで、これを解決することができました
<div class="col text-center justify-content-center align-self-center">
<img width=3rem src=".." alt="...">
</div>
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
}
上記のどれも私のために働かなかったので、私は別の答えを加えています。
目標：ブートストラップ4フレックスボックスクラスを使用してページ上のdivを垂直方向と水平方向に揃える。
ステップ1：一番外側のdivを100vhの高さに設定します。これは、高さをVeiwportの高さの100％に設定します。あなたがこれをしないなら、他に何も働かないでしょう。これを100%の高さに設定することは、親に対してのみ相対的です。そのため、親がビューポートの完全な高さではない場合、何も機能しません。以下の例では、Bodyを100vhに設定しています。
ステップ2：コンテナdivをd-flexクラスを持つflexboxコンテナになるように設定します。
ステップ3：divをjustify-content-centerクラスで水平方向に中央揃えにします。
ステップ4：align-items-centerを使ってdivを垂直方向に中央揃えにする
ステップ5：ページを実行して、縦と横の中央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>
ブートストラップ4（ベータ）では、align-middleを使用してください。 Bootstrap 4の垂直方向の配置に関するドキュメントを参照してください ：
vertical-alignment ユーティリティを使用して要素の配置を変更します。 vertical-alignは インライン 、 インラインブロック 、 インラインテーブル 、および テーブルセル のみに影響することに注意してください要素.
必要に応じて、
.align-baseline、.align-top、.align-middle、.align-bottom、.align-text-bottom、および.align-text-topから選択します。
<!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>
私はこのようにして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 >
ブートストラップ4.1.3の場合：
私がcontainer > row > columnタイトルの隣のh1の内側にブートストラップバッジを集中させようとしていたとき、これは私にとってうまくいきました。
うまくいったのは、いくつかの単純なCSSです。
.my-valign-center {
vertical-align: 50%;
}
または
<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>
<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>
