CSSで垂直方向の中央表示を実装

CSS2011年1月11日

CSSで垂直方向の中央表示を実装する方法をご紹介します。ポイントは、positionプロパティを%指定する点です。

実際のサンプル

HTML

<div class="txt">
<p>中央に表示<br />中央に表示</p>
</div>

CSS

div.txt{
width:300px;
height:300px;
background:#efefef;
position:relative;
}
div.txt 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は行の最大文字数の半分を-で設定
margin-topは行数の半分を-で設定

divの高さが固定されている必要があるので、使いどころが限られていますがプレーンテキストで実装したい場合に意外と使えます。

画像場合の垂直方向中央表示

画像の場合はもっと簡単です。

div.image{
width:300px;
height:300px;
background:#efefef;
position:relative;
}
div.image p{
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}

margin-leftには画像の幅の半分を、margin-topには画像の高さの半分を設定します。こちらは横幅は固定されている必要があるものの高さは固定である必要はないので、ある程度汎用的に使えると思います。

この記事を読んでいる方にオススメの記事

「CSS」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。