IE9にも対応しています。
1 2 3 |
<div class="box"> <p>テキスト</p> </div> |
1 2 3 4 5 6 7 |
.box p { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } |
この場合、.boxの方に高さやらボーダーやらが指定されてるのが前提ですね。デフォルトのdivでは内容に合わせて高さが変わるので、天地中央にはなっていますから。