【CSS】要素を上下左右に中央寄せする色々な方法

中央寄せはよく使うテクニックなので、覚えておいて損は無し。 新しいブログでこの記事の最新版を書き起こしました。
こっちで紹介する方法のほうがスマート・簡単に実装できるので、気になる人はリンク先にGo！

---

左右、上下、上下左右と、色々なパターンの中央寄せの方法についてまとめました。

左右の中央寄せ

まず、中央寄せしたい要素が「インライン要素」であるか「ブロック要素」であるかを調べましょう。 例えばテキストや画像はインライン要素、<div>や<p>はブロック要素です。

インライン要素の左右中央寄せ

インライン要素を中央に寄せたい場合、その要素を包むブロック要素（今回はdiv）に「text-align: center;」を指定します。これは簡単ですね。

ブロック要素の左右中央寄せ

ブロック要素を中央に寄せたい場合、その要素に「margin: 0 auto;」を指定します。左右にautoにすると中央に動いてくれるという、なんとも分かりやすい仕様です。

上下の中央寄せ

上下の中央寄せは、初心者の方には少し分かりづらいかもしれません。

（ブロック要素内の）インライン要素の上下中央寄せ

中央寄せしたい要素を内包する要素に「vertical-align: middle;」を指定すると、インライン要素を上下に中央寄せすることが出来ます。しかし、vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけです。インライン要素には高さが指定できないので、普段あまり使わない「テーブルセル」を使うことになります。
あまり使わない、と言っても要はただの<td>なので、慣れれば簡単。中央寄せしたいインライン要素を内包する要素を「display: table-cell;」でテーブルセル化し、「vertical-align: middle;」を指定して終わりです。

ブロック要素の上下中央寄せ

多分これが一番理解しづらい。
まず中央寄せしたい要素に「position: absolute;」を指定し、上下からの距離に0を指定します（「top: 0;」と「bottom: 0;」）。最後に「margin: auto;」を指定すればあら不思議、中央に配置されていますね…もちろん中央寄せしたい要素を内包するブロック要素には「position: relative;」もしくは「position: absolute;」を指定しないと動かないので注意。
なんでこういう挙動をするのかは専門家じゃないので分かりませんが、詳しく解説している方がいたので参考にどうぞ。

上下左右中央寄せ

ド真ん中に配置したいときに使いましょう。

（ブロック要素内の）インライン要素の上下左右中央寄せ

左右中央寄せ＋上下中央寄せの方法を組み合わせるだけです。

ブロック要素の上下左右中央寄せ

さっきの上下中央寄せの方法に「left: 0;」「right: 0;」を追加するだけです。
ちなみにこの方法、例えばleftだけ100pxと指定すると「中央から右に100pxの位置に配置」や、topの記述だけを削除すると「左右中央かつ下端に張り付く」などなど、なかなか柔軟に位置を決めることが出来ます。

---

最後に上下の中央寄せの話ですが、今までLeoTiger_7は中央寄せしたい要素に「top: 50%;」「transform: translateY(-50%);」を使っていました。この方法でも中央に配置できるんですが、IE8以下が非対応という弱点があります。IE8はさすがに無視できない…
しかし、今回紹介した方法はIE8でも動作するので、ガンガン使ってOKだと思います。