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

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では中央に寄ってる様に見える事があります

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

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら