blog.yahiro.me

てきとうにかこう。

CSSで中央揃えしたいときのチートシート

2020年1月19日
技術 (CSS)

中央揃えをしたい!

Webでコーディングするときに、要素を中央揃えしたいときありますよね。

そんなときにどんな方法で中央揃えしていますか?

様々なパターンに合わせたCSSで中央揃えをする方法をまとめたチートシートを作りましたので、 活用してみてください!

左右:中央揃え

text-alignを使った中央揃え

<div class="outer"> <div class="inner"> </div> </div>.outer { text-align: center; }.inner { display: inline-block: }

文字を中央揃えするときに使うプロパティですが、要素も中央揃えすることができます。

height:制限なし

width:外側の要素の幅いっぱいまで

marginを使った中央揃え

<div class="outer"> <div class="inner"> </div> </div>.outer { width: 100%; }.inner { margin-right: auto; margin-left: auto; }

要素のheightを固定した上で、外側の要素の幅の中で中央揃えします。

例えば、.container のような、max-widthを指定する場合など、これをしようします。

height:制限なし

width:指定の幅まで

上下左右:中央揃え

positionとtransformを使った中央揃え

<div class="outer"> <div class="inner"> </div> </div>.outer{ position: relative; width: 100%; height: ? }.inner{ position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }

要素の中の入れ子の状態で、上下左右中央揃えします。

例えば、headerにbackgroundの背景を指定し、上下左右中央にタイトルやリストを表示。しかしタイトルなどが入っている要素の中では要素は左揃えにする場合などに使います。欲張りセットですね。

height:成り行き(指定なしの場合50%まで)

width:外側の要素の幅いっぱいまで

display: flexを使った中央揃え

<div class="outer"> <div class="inner"> </div> </div>.outer{ display: flex; justify-content: center; align-items: center; }.inner{ display: inline-grid; }

なんも考えたくないときには、これをつかいましょう。

要素の中の入れ子の状態で、上下左右中央揃えします。

例えば、positionを使った中央揃えのときと似ていますが、headerにbackgroundの背景を指定し、上下左右中央にタイトルやリストを表示。しかしタイトルなどが入っている要素の中では要素は左揃えにする場合などに使います。

innerを使わず、直接h1とpなどの要素をそのまま使ってしまうと、display:flex;の仕様上、h1とpが並んだ状態で設置されてしまいます。

その問題を解決するためには、innerを入れた上で、display: inline-grid;を使ってあげることで、要素要素がきちんと並んで表示されるようになります。

height:成り行き

width:外側の要素の幅いっぱいまで

活用

下に固定して中央揃えする場合

<div class="outer"> <div class="inner"> </div> </div>.outer{ position: relative; width: 100%; height: ? }.inner{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

positionとtransformを使った中央揃えを活用した形です。

transformで上下左右中央へ移動させていましたが、X座標のみを移動させ、top: 50%; と指定していたものを、bottom: 0; へと変更したことによって、下に固定することができます。

また、bottom: 0; を top: 0; へ変更するなど、様々な活用の方法はありそうです。

まとめ

よかったら使ってみてね

Twitterのフォローもしてくれたら嬉しいね