SRC遊んだり書いたり。時々プログラミング

SRCの感想とか技術解説とか、そんな感じのアレ!

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を指定することで、両左右に適切な余白を取り、中央寄せする事ができます。