CSS の display: table-cell を使って画面中央に要素を配置する
なんらかの要素を画面の中央に配置したい、ということはしばしばあります。 水平方向 (横方向) の中央揃えは CSS の text-align: center
を使ったり、ブロック要素ならば margin: auto
を使ったりして簡単に実現できますが、垂直方向 (縦方向) の中央揃えはちょっと悩むところです。
昔は table
要素などを使って実現したりしていましたが、表を表示したいわけでもないのに table
要素を使うのはよくないので、ここでは CSS を使って垂直方向の中央揃えを行う方法を説明します。
display: table-cell
を使って垂直方向の中央揃えをできるようにする
縦方向の中央揃えをするために CSS を調べていてまず見つけるのは vertical-align
プロパティだと思います。 しかしながら、vertical-align
プロパティを使って中央揃えを実現しようとしてもおそらくできないはずです。 なぜなら、このプロパティは高さの違うインライン要素を、縦方向のどこで揃えるかを指定するものだからです。
しかしながら、table のセルとなる要素で vertical-align
プロパティを使用した場合だけは、中身の要素の垂直方向の配置位置を指定することができます。 すなわち、display: table-cell
を指定した要素で vertical-align
プロパティを使用すると、その中身の要素の垂直方向の配置位置を指定できます。
<div style="display: table-cell; vertical-align: middle;
height: 200px; background-color: #EEEEEE; padding: 5px;">
<div style="border: solid 1px #666666; padding: 3px;">この要素を中央配置する</div>
</div>
上記のように書くと、下図のように中央配置できていることがわかります。
詳しくは次の記事をご覧ください。
display: table-cell
を指定した要素の高さを親要素の高さに揃える
さて、display: table-cell
を使えば垂直方向の中央配置ができました。 上で書いた例では、高さ 500px の要素の中に、垂直方向に中央に来るように子要素を置いたわけです。 しかしながら、display: table-cell
を指定する要素の高さを、親要素にそろえようとした場合はどうなるでしょうか?
<div style="height: 200px; background-color: #99CCFF;">
<div style="display: table-cell; vertical-align: middle;
height: 100%; background-color: #EEEEEE; padding: 5px;">
<div style="border: solid 1px #666666; padding: 3px;">この要素を中央配置する</div>
</div>
</div>
結果は次のようになってしまいます。
背景色が灰色の要素 (display: table-cell
を指定した要素. height: 100%
である) の高さが水色の要素の高さと一致して欲しいところですが、期待通りの結果にはなりません。
ではどうすればいいかというと、display: table-cell
を指定した要素の親要素に、display: table
とすれば良いのです。 そうすれば、高さは一致します。
<div style="display: table; height: 200px; background-color: #99CCFF;">
<div style="display: table-cell; vertical-align: middle;
background-color: #EEEEEE; padding: 5px;">
<div style="border: solid 1px #666666; padding: 3px;">この要素を中央配置する</div>
</div>
</div>
div
要素を画面の中央に配置する例
最後に、div
要素を画面の中央に配置する例を書いておきます。
まず、HTML は次のようにします。 HTML5 の形式で書いています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="1119_vertmiddle.css">
<title>画面中央に要素を配置するサンプル</title>
</head>
<body>
<div id="test">
<p>画面中央に要素を配置</p>
</div>
</body>
</html>
で、この HTML は 1119_vertmiddle.css という 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;
}#test {
padding: 8px;
border: solid 3px #666666;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
大事なのは html
要素と body
要素に対するスタイルの適用です。 このように指定しておくと、id が "test" の要素が画面の中央に配置されます。 以下のページのこのサンプルファイルをアップロードしてありますので、ご覧ください。
(ここに書いてある方法は、最近のブラウザ (Firefox 3.6 や Safari 5、Opera 10.6 や IE 8 など) だと問題なく使用できます。)