中央寄せにするCSS

Webデザインにおいて、要素を画面の真ん中に配置する「中央寄せ」は非常によく使われるテクニックです。しかし、対象が文字（テキスト）なのか、ブロック（divなど）なのかによって、使うべきCSSプロパティが異なります。

今回は、実務でも頻出する代表的な3つの中央寄せ方法をまとめました。

1. テキストやインライン要素の中央寄せ

文字やリンク（aタグ）、画像（imgタグ）などを中央に寄せたい場合は、親要素に対して text-align: center; を指定します。

.parent { text-align: center; }

2. ブロック要素の中央寄せ（margin: auto）

divなどのブロック要素自体を中央に配置したい場合は、その要素自体に横幅（width）を設定した上で、左右の余白を自動（auto）にします。

.child { width: 50%; margin-left: auto; margin-right: auto; }

※ margin: 0 auto; と省略して書くことも一般的です。

3. 現代的な万能手法（Flexbox）

上下左右、完全にど真ん中（天地中央）に配置したい場合は、親要素に Flexbox を指定するのが一番簡単で強力です。

.parent { display: flex; justify-content: center; align-items: center; }

まとめ

昔に比べて、FlexboxやGridの登場で中央寄せの難易度は格段に下がりました。配置したい要素の性質に合わせて、最適なCSSを選べるようにしておきましょう。