Bootstrapで上下中央寄せする方法を解説！
Bootstrapでテキストや画像を上下中央寄せする方法をサンプルコード・実際の表示結果を交えて解説します。また、Bootstrapで用意されているフレックスを用いて、上下中央だけでなく左右方向の中央寄せや、上寄せ・下寄せの方法も紹介します。
Bootstrapで上下中央寄せする方法
Bootstrapでテキストや画像を上下方向で中央寄せ（センタリング）する方法を解説します。また、似た手法で上寄せ・下寄せする方法も紹介します。
.d-flexと.align-items-centerを適用
div要素に.d-flexと.align-items-centerを適用することで、子要素（もしくは内容）を上下方向に中央寄せにすることができます。
index.html
<div class="d-flex align-items-center">
サンプルテキスト
</div>このように、.d-flexを適用することでdiv要素がフレックスコンテナになり、子要素がフレックスアイテムになります。また、.align-items-centerを適用すると上下方向（正確にはアイテムが並ぶ方向からみて垂直方向）の揃えが中央になります。
テキストの上下中央寄せの例
実際にテキストを上下中央寄せする例を以下に示しています。
なお、以下の例ではわかりやすいように背景色（.bg-info）と親要素の高さ（height:300px）を指定しています。
今回は縦方向で中央寄せにするため、このように親要素の高さを指定しないと子要素の上下（縦方向）に余白が生まれないことに注意してください。
画像の上下中央寄せの例
テキストの代わりにimg要素を記述すれば、同様に画像を上下中央寄せにすることができます。
（こちらもわかりやすさのため、背景色や要素の高さを指定しています。）
index.html
<div class="bg-info d-flex align-items-center" style="height:300px;">
<img src="sample.jpg" alt="サンプル画像" style="width:300px;">
</div>上記のコードを用いた実際の表示結果は以下のようになります。
上下左右の中央寄せ
上記のコードで、div要素にさらに.justify-content-centerを適用することで、左右方向も中央寄せにする（センタリングする）ことができます。こちらも同様にフレックスを用いているため、.d-flexが適用されている場合にのみ効果があります。
Bootstrapで上寄せ・下寄せの方法
中央寄せと同じように、フレックスを使って簡単に上寄せ・下寄せにすることができます。
index.html
<div class="d-flex align-items-start" style="height:300px;">
このテキストは上寄せになります
</div>
<div class="d-flex align-items-end" style="height:300px;">
このテキストは下寄せになります
</div>このように、.d-flexに加えて.align-items-startを適用すると上寄せに、.align-items-endを適用すると下寄せになります。
（正確には上寄せ・下寄せではなく、フレックスアイテムの並ぶ方向の開始位置寄せ・終了位置寄せになります。）
以下は、実際に上寄せを適用した例です。見やすさのために背景色を適用しています。
