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>

上記のように書くと、下図のように中央配置できていることがわかります。

詳しくは次の記事をご覧ください。

CSS で簡単に上下中央揃えを実現する | ヨモツネット

`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;

}