Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2015年2月14日 Web制作

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


cntr 中央寄せはよく使うテクニックなので、覚えておいて損は無し。
左右、上下、上下左右と、色々なパターンの中央寄せの方法についてまとめました。

左右の中央寄せ

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

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

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

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

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

上下の中央寄せ

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

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

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

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

多分これが一番理解しづらい。
まず中央寄せしたい要素に「position: absolute;」を指定し、上下からの距離に0を指定します(「top: 0;」と「bottom: 0;」)。最後に「margin: auto;」を指定すればあら不思議、中央に配置されていますね…もちろん中央寄せしたい要素を内包するブロック要素には「position: relative;」もしくは「position: absolute;」を指定しないと動かないので注意。
Lorem ipsum dolor sit amet.

なんでこういう挙動をするのかは専門家じゃないので分かりませんが、詳しく解説している方がいたので参考にどうぞ。

上下左右中央寄せ

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

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

左右中央寄せ+上下中央寄せの方法を組み合わせるだけです。
Lorem ipsum dolor sit amet.

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

さっきの上下中央寄せの方法に「left: 0;」「right: 0;」を追加するだけです。
Lorem ipsum dolor sit amet.

ちなみにこの方法、例えばleftだけ100pxと指定すると「中央から右に100pxの位置に配置」や、topの記述だけを削除すると「左右中央かつ下端に張り付く」などなど、なかなか柔軟に位置を決めることが出来ます。
最後に上下の中央寄せの話ですが、今までLeoTiger_7は中央寄せしたい要素に「top: 50%;」「transform: translateY(-50%);」を使っていました。この方法でも中央に配置できるんですが、IE8以下が非対応という弱点があります。IE8はさすがに無視できない…
しかし、今回紹介した方法はIE8でも動作するので、ガンガン使ってOKだと思います。
関連するかもしれない記事