ボックス要素内で縦方向の位置を指定する

CSSで行内やセル内の縦方向の位置を指定するにはvertical-alignを使うが、ボックス要素内で指定しても効かない。このようなときは、ボックス要素をdisplay:table-cellでセルに変えて、vertical-alignを使う。

CSS

#box {
    width:600px;
    height:400px;
    border:solid 1px #000;
    display:table-cell;
    vertical-align:middle;
}

HTML

<div id="box">
第二話 王女とオリオンの間で<br>
モンゴル王国の位置する『ムシダナ大陸』に存在する国家は大小合わせて七つある。
</div>