Bootstrap4で上下左右を中央寄せにする方法

2020年2月28日2020年6月11日Bootstrap

自分でもしょっちゅう忘れてしまうのでメモしておきます

結論から言うとこれを使います

<div class="d-flex align-items-center justify-content-center">
    上下左右を中央寄せにしてー
</div>

それぞれの意味は、

d-flex → 要素をフレックスコンテナ化します

これを指定しないと以下の要素が有効になりません

align-items-center → 上下中央寄せ

justify-content-center → 左右中央寄せ

ちなみに左右中央には「text-center」って言う良く使う指定方法がありますが、d-flexを指定すると「text-center」が使えなくなります

だから代わりにjustify-content-centerを使うってわけです

ちなみに、justify-content-centerは指定しなくてもPCでは中央に寄ってる様に見える事があります

でもスマホ画面で見ると中央に寄ってないので忘れずに指定しましょう