テキストを縦方向中央に配置するデモ

このページはブログ『Wataame Frog』の「縦幅サイズがわからない要素の縦中央にテキストを配置する方法」という記事のサンプルです。
記事URL : http://wataame.sumomo.ne.jp/archives/6454

縦幅が不明なボックスの縦中央にテキストを配置

※縦を300pxとして作成した場合

<style>
.sample_box {
    margin: 1em 0;
    border: 1px solid #ccc;
    height: 300px;
    width: 150px;
}

div.sample_box {
    display: table;
}

.sample_box p.text {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0.5em;
}
</style>

↑ 上記CSSを指定すると、縦幅の中央に配置できる