複数行のテキストを縦横中央揃えにする方法 #CSS

横の中央揃えは margin使えば簡単なんだけど、縦の中央揃えは
何かと厄介だったりします。

親要素のサイズが決まっている場合は、以下の方法が簡単です。

html

<p class="container">
    <span class="text">ここに複数行テキスト<br/>が入ります。</span>
</p>

css

.container{
    width: 100px;
    height: 100px;
}

.container .text{
    display: table-cell;
    width: 100px;
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

このように、
html側では中央揃えしたい要素をinline要素として置き、
css側ではその要素に対して 親要素と同じサイズ指定をした上で

display: table-cell;
text-align: center;
vertical-align: middle;

の3つのプロパティを設定することで実現できます。