センター配置

真ん中に表示させる、というお話。

センター配置

このページでは、ある要素を CSS で中央に表示する方法について解説していく。

センター配置の種類は3種類で、

がある (ここでの呼び方は、僕が分かりやすいように勝手に名付けている)。

水平センター配置

文字の水平センター配置

要するに文字のセンタリング。これは text-align:center; を指定するだけで OK。

div.center {
    width:200px;
    height:200px;
    text-align:center;
}

ボックスの水平センター配置

ボックスを画面の中央に配置する場合。本来は左右マージンに auto を指定すればできるのだが、IE にバグがあるため、それを考慮して作る。

IE のために text-align:center; を指定すると、ボックス自体だけでなくボックス内の文章までセンタリングされてしまうので、それを直すため div.inner を設けて、そこで文字のセンタリングを解除する。

なお、text-align の本来の適用対象は、ボックス内のインラインの内容であることを覚えておくこと。

HTML
<div class="center">
 <div class="inner">
  水平センター
 </div>
</div>
CSS
div.center {
    margin-left:auto;
    margin-right:auto;
    width:200px;
    height:200px;
    text-align:center; /* for IE */
}

div.center div.inner {
    text-align:left; /* for IE */
}

垂直センター配置

文字の垂直センター配置

縦のセンター配置は vertical-align:middle; で実現できそうだが、vertical-align の適用対象はインライン要素とセル要素のみなので、ボックスには使えない。ボックスで垂直センターを実現させるには、height と同じ数値を line-height に与えて指定する。

div.center {
    width:200px;
    height:200px;
    line-height:200px;
}

この方法は、ボックス内の文章が1行に収まるときのみ有効。文章が2行以上の場合は別のやり方があるが、利用頻度が少なく解説も面倒なので省くw。参考ページを参照のこと。

ボックスの垂直センター配置

ボックスを垂直センター配置するには、以下のように指定する。

HTML
<div class="center">
 垂直センター
</div>
CSS
div.center {
    margin-top:-100px;
    position:absolute;
    top:50%;
    left:0;
    width:200px;
    height:200px;
    }

幅・高さ共に 200px のボックスを中央配置するサンプル。margin-top に、width の半分の値を指定する。

画面中央配置

ボックスの垂直センター配置の応用、というか、こっちを基にボックスの垂直センター配置を作った。画面の縦横中央に要素を配置する。

HTML
<div class="center">
 画面中央
</div>
CSS :
div.center {
    margin-top:-100px;
    margin-left:-100px;
    position:absolute;
    top:50%;
    left:50%;
    width:200px;
    height:200px;
    }

幅・高さ共に 200px のボックスを中央配置するサンプル。margin-top には height、margin-left には width の半分の値をそれぞれ指定する。