vertical-alignの使い方でline-heightでの垂直表示は説明しましたが、あの方法ですと2行以上の場合は利用できないです。
2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。
(X)HTMLソース
<div>
<p>中央に表示<br />したい文字</p>
</div>
CSSソース
div{
width:200px;
height:200px;
background:#39FF6B;
position:relative;
}
p{
position:absolute;
top:50%;
left:50%;
margin-left:-2.5em;
margin-top:-1em;
}
positionを使いp要素の開始位置を中央に設定します。
その後にmarginを使いp要素の中央とdiv要素の中央が同じ位置になるように変更します。
ポイントとしてはp要素のmargin-leftの-2.5emとmargin-topの-1em
margin-leftには行の最大文字数の半分を-であたえます。(今回の場合は5文字/2)
margin-topには行数の半分を-であたえます。(今回の場合は2行/2)
画像の場合
画像の場合はもっと簡単です。
div{
width:200px;
height:200px;
background:#39FF6B;
position:relative;
}
p{
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
margin-leftは画像の幅の半分を、margin-topには画像の高さの半分を設定します。