CSSで要素を左右中央寄せする方法4選

はじめまして、社員Sです。

本日から、HTML・CSS等のプログラミングに関する記事を投稿していきたいと思います。

今回は、CSSで要素を中央に寄せる方法をまとめてみました。

基礎的な部分にはなりますが、ここをしっかり抑えておくと様々な場面で役に立つと思います。

要素について

親要素を青、子要素を赤の枠で左上を初期位置として表示しています。

See the Pen block by Kohki Shiga (@Kohki92) on CodePen.dark

See the Pen inline by Kohki Shiga (@Kohki92) on CodePen.dark

text-alignを用いた中央寄せ

この方法が最もポピュラーだと思われます。

中央寄せしたい要素の親要素に text-align: center; を指定します。

しかし、適用されるには条件があり、親要素がブロック要素、子要素がインライン要素である必要があります。

See the Pen text-align_2 by Kohki Shiga (@Kohki92) on CodePen.dark

marginを用いた中央寄せ

次点でよく用いられるのが、marginを使った中央寄せです。

marginプロパティに値を二つ連続で指定すると、最初の値が上下、二番目の値が左右のmarginとして指定されます。(例：margin: 10px 10px;)

これを応用し、margin: 0 auto; と記述すると左右のmarginを自動で算出され中央に配置される仕組みになっています。

これも条件があり、ブロック要素にしか適用されず、インライン要素には効かないので注意が必要です。

See the Pen margin by Kohki Shiga (@Kohki92) on CodePen.dark

display:flexを用いた中央寄せ

個人的にはこれが一番使い勝手が良いと思います。

中央寄せしたい要素の親要素にdisplay: flex; を指定し、justify-contentという水平方向のプロパティにcenterを指定することで、子要素が中央に配置される仕組みになっています。

See the Pen flex by Kohki Shiga (@Kohki92) on CodePen.dark

positionを用いた中央寄せ

あまりおすすめはできませんが、positionプロパティを使った中央寄せの方法もあります。

親要素にposition: relative、子要素にposition: absoluteを指定しleft: 50%; と記述します。

すると子要素は親要素の範囲内で左上を初期位置として動くので、子要素の左辺が親要素のちょうど半分の位置に来るように動きます。

そこでtransformプロパティにtranslateX(-50%)と指定することで自身の要素の幅 半分のみを引き戻しています。

See the Pen position by Kohki Shiga (@Kohki92) on CodePen.dark

ここで注意してほしいことは、relativeを指定した親要素に対して子要素の位置が決まるので、レスポンシブ対応ページの際には、レイアウトが崩れないようよく考えて指定してください。

以上、CSSで要素を左右中央寄せする方法4選でした。

これからも、プログラミングに役立つ情報をご紹介できればと思います。