2016年2月アーカイブ

ボックスの高さを固定(heightで高さを指定)させていないと使えない方法ですが、例えば、Webページのヘッダーやフッターのメニューを上下中央寄せしたい場合に便利です。

(X)HTMLコード

<div>
<p>
テキスト
</p>
</div>

CSSコード

div {
    height:100px;
}

div p {
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

ポイントは、『top:50%』で要素の上部をボックスの真ん中に合わせた後、『transform:translateY(-50%)』で、要素の高さ分の半分を上方向に移動させているところです。

尚、『transform』プロパティはCSS3になるのですが、IEはバージョン9からの対応になります。