ある要素を画面の中央（縦横ともに中央）に配置したい。そんなとき使えるCSSテクニックについて書きます。※IE7以下のブラウザには対応していません。
水平方向（横位置）に対する中央揃えは、CSSで text-align: center; を使ったり、ブロック要素ならば margin: 0 auto; を使ったりして実現できます。しかしながら、垂直方向（縦位置）の中央揃えとなると、簡単に出来そうでなかなか上手くいかず、悩むところです。
tableタグによって実現することもできますが、あまりスマートなやり方ではありませんので、ここではCSSを使って中央に配置する方法を説明します。
[adsense]<TABLE>タグをレイアウト目的で使用するケースがありますが、 <TABLE>タグは本来はテーブル（表）を作成するためのタグです。 レイアウト目的には、できるだけスタイルシートを利用してください。
display: table-cell; を指定する
縦位置の中央揃えということで vertical-align: middle; を指定して実現できそうですが、これが出来ないんです。vertical-align は、高さの違うインライン要素の垂直方向の位置を揃えるためのプロパティであるからです。
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。
ただ、このvertical-alignプロパティは、tableセルとなる要素で使用した場合には、中身の要素の垂直方向の配置位置を指定することができます。つまり親要素に display: table-cell; を指定した上でvertical-alignプロパティを使用すると、子要素の垂直方向の配置位置の指定が可能となります。
e.g.
<div style="display: table-cell; vertical-align: middle;
width: 602px; height: 200px; background: #ccc;">
<div style="width: 200px; margin: 0 auto; text-align: center;
padding: 20px 0; color: #fff; background: #08c;">要素を中央に配置</div>
</div>
この記述で下記のように、親要素に対して子要素が縦横中央に配置されます。
要素を画面の中央に配置する
上記の方法を応用して、画面中央に要素を配置するための記述例をご紹介します。
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>要素を画面中央に配置</title> </head> <body> <div id="content"> <p>要素を画面中央に配置</p> </div> </body> </html>
CSSは以下の様に指定します。
css
html {
height: 100%;
margin: 0 auto;
padding: 0;
display: table;
}
body {
min-height: 100%;
margin: 0 auto;
padding: 0;
display: table-cell;
vertical-align: middle;
}
#content {
color: #fff;
background: #08c;
padding: 20px;
}
ポイントは display: table-cell; を指定している要素（上記例ではbody）の親要素（上記例ではhtml）に、display: table; を指定しているところです。こうすることで、子要素の高さが親要素と一致するため、内包する孫要素（上記例では#content）を垂直方向に中央揃えさせることが出来ます。
サンプルはこちら
実際に上記コードを記述したサンプルページは以下です。
[…] 【未分類】 CSSで要素を画面中央に配置する方法 – hT DESIGN blog « […]