Neo's World

センター配置

このページでは、ある要素を 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 の半分の値をそれぞれ指定します。