【これぞ今風】CSSで要素を上下左右中央寄せにする記述方法｜inset/Flexboxなど

2024年5月2日2024年5月14日

いろんなCSSプロパティがブラウザでサポートされるようになっている今、レイアウトのCSSも前とは少し異なった記述を使うようになりました。

本記事では、意外と悩むことが多いであろう上下左右を中央に揃えるCSSを紹介していきます。

さとみ

これを知っておけば、「まだこの書き方してるの？」とか言われることはもうないはず。

【まずはじめに】よく使われているCSS

最も使用されている左右中央寄せの方法です。margin: auto;でもOK。

marginでは上下にautoを指定しても0と同じ扱いになるため、margin: auto 0;にしても上下中央にはなりません。

positionやFlexboxをあわせて使うことでmarginでも上下中央寄せはできますが、もっと楽な方法があるのでわざわざ実行する人はいないでしょう。

一応、その方法も載せておきますね▼

絶対値で中央寄せにしたいときに、この方法がよく使われます。

上から50%（top: 50%;）・左から50%（left: 50%;）の位置に移動させると、中央寄せにする子要素（.box--item）の左上が親要素（.box）の中心に来ます。

子要素の左上を起点とし、大きさの半分ずつをtranslateで戻す、という仕組みです。

筆者的には、これが一番楽でわかりやすいおすすめの方法です。

幅（width）や高さ（height）を指定したくない場合にめちゃくちゃ便利です。
親要素にFlexboxを指定して子要素を中央揃えにします。

左右中央寄せ（.flex_h）の子要素だけ親要素の縦幅いっぱいに伸びていますが、align-items: flex-start;を追加することで上付きになるため伸びる現象を回避できます。

さとみ

上記のCodePenプレビュー画面に開発者ツール（F12）でalign-items: flex-start;をあててみてください！

CSS GridもFlexboxと同様、最小限のプロパティ（最短2行）で実現可能です。

何よりも最大の利点は、親要素直下に複数の子要素があっても行数・列数が自由自在であることです。

上のプレビューでは行数指定・列数指定はしておりませんが、grid-templateというプロパティでできますので、ぜひご参考ください。

/* 2行2列 */
grid-template: repeat(2, auto) / repeat(2, auto); /* 行数 / 列数 */

/* 列の指定なしでもOK */
grid-template-columns: repeat(2, auto);

早くflexとgridを覚えたい方は『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』にとてもわかりやすく解説が書かれております。（大変お世話になりました）

こちらの書籍、なんと2019〜2024年、5年連続売上第1位を誇る超絶人気なHTML本なのです！
しかも2024年3月2日に改訂版が発売されているので、ビギナーさんはこの一冊でWeb制作の最新技術が身につくこと間違いなしです^^

前述でちらっと紹介したpositionを使ったmarginでの上下中央寄せと仕組みはほぼ同じですが、異なる点はtoprightbottomleftではなくinsetを使っている点です。

insetは、toprightbottomleftをまとめて指定するプロパティです。

insetを使うことで一括管理がしやすくなりメンテナンス性が上がります。

こちらも、幅（width）と高さ（height）の指定は必須です。

margin-inlineはCSSの『論理プロパティ』と呼ばれるプロパティで、要素の水平方向（inline）のmarginを設定します。

『論理プロパティ』とは、文字の方向（writing-mode）によって意味が変わるプロパティのことです。水平方向（inline）と垂直方向（block）の二種類があります。

ちなみに、topleftなど方向を指定するプロパティは『物理プロパティ』と呼ばれています。

「margin: 0 auto;でも同じじゃない？」と思われるかもしれませんが、できれば避けたい理由があります。

marginはあくまでmargin-top,margin-bottom,margin-right,margin-leftのショートハンドなので、予期せぬCSSの相殺（上書き）を危惧したほうがよいためです。

左右中央にしたいだけならmargin-inlineを強く推します。

垂直方向のmarginならmargin-blockを使用します。
しかしmargin: auto 0;と同じく上下中央にはならないのでご注意ください。

どれが一番とかはなく、最適な方法は状況によって変化します。

上手に使い分けて、新時代コーディング（？）を極めていきましょう＾＾