CSS

2017/05/16

縦位置中央でご紹介した方法は高さの単位にvh（view height）を使うというものでしたが、マイクロソフト系ブラウザ（IE）では難点があり、安心して使用できない可能性がありました。ですから別の方法もご紹介しておきます。

CSSのdisplayプロパティーでtable-cellを使用するものです。見たままでdisplay:table-cellが設定されるとtd要素と同じようにふるまってくれるというものです。td要素には垂直位置をしているvertical-alignプロパティーがあるのでmiddleを指定すれば縦位置中央が実現できます。

ただ注意点としましては、display:table-cellを有効にするためには親要素にdisplay:tableを設定してあげないといけません。可変長ボックスの縦位置中央にボックスを配置するのでdisplay:table-cellを設定するのは外側の要素に設定しないといけません。外側のボックスのdisplay:table-cellを有効にするためにはその親要素にdisplay:tableを設定しないといけませんので表示は2重のボックスですが、HTML的には3重のボックスを作らないといけません。

サンプルを別ウィンドウで開く諸般の都合で別ウィンドウになります。

HTML

<div class="diplay_table">
  <div class="p_box">
    <div class="c_box">
    </div>
  </div>
</div>

CSS

html,body{
  height:100%;           /* heightをブラウザの高さ基準にする */
}
.diplay_table{
  width:50%;
  height:50%;
  display:table;　　　　　/* table-cellを有効にするため必要 */
}
.p_box{
  background-color:#ff0;
  width:100%;
  height:100%;
  display:table-cell;
  vertical-align:middle; /* display:table-cellなので有効 */
}
.c_box{
  background-color:#00f;
  width:50%;
  height:50%;
  margin:auto;
}

html要素とbody要素にheight:100%を設定しておかないとどこまでたどっても高さが設定されていない可能性があります。diplay_tableクラスの祖先要素に有効なheightが設定されてたらその50%の高さになりますが、サンプルはdiplay_tableクラスの祖先がhtml要素とbody要素を想定しています。

3重のボックスの一番祖先にdisplay:tableを設定します。そして表示したいボックスの幅と高さを設定します。今回はブラウザの表示領域の縦横50%です。その子供のp_boxクラスは親要素の幅と高さの100%としますのでやっぱりブラウザの表示領域の縦横50%となります。そしてdisplay:table-cell;を設定し、さらにvertical-align:middleを設定します。これでdiplay_tableクラスの子孫のp_boxクラスの子どもは縦位置中央に配置されます。

表示のためだけにdiv要素の階層が1つ増えてしまいますが、この方法でしたらIE8から対応しているようですので安心して利用できると思います。