CSS3で要素を画面中央に配置するテクニック
こんにちは!
昨日のエントリと被りますが、今回はCSS3で要素を画面中央に配置する方法に焦点を当てて、テクニックをご紹介します。
概要&デモ
チュートリアル
縦方向(垂直)の中央寄せ
html{ display:table; } body{ display:table-cell; vertical-align:middle; } html,body{ height:100%; width:100%; }
CSSのvertical-align:middleは縦方向で中央寄せする事ができるプロパティですが、表の中のセルでしか効果を発揮しません。
そこで、<html>タグを表、<body>タグをセルとして扱う事で、vertical-align:middleをドキュメント全体に適用させます。
CSS3で新たに定義されたdisplay:tableは、要素を見かけ上だけ表組みとして扱います。
また、display:table-cellは、要素を表のセルとして扱います。
これらはスタイルシートで見かけのみを変更するので、HTMLのマークアップが汚くならない利点があります。
横方向(水平方向)の中央寄せ
section#setsumei{ margin:0 auto;/*水平方向の中央寄せ*/ width:55%; }
ブロック要素は標準だと親要素の横幅いっぱいに幅を取るので、中央寄せに伴い、横幅を指定します。
そして、marginで横方向にautoを指定することで、両左右に適切な余白を取り、中央寄せする事ができます。