CSSでボックスを上下左右中央に配置する第３の方法


CSSを使ってBoxを上下左右中央に配置するやり方はこれまでもいくつかありました。代表的なのはdisplay: table; を使った方法と、positionプロパティとネガティブmarginを用いたやり方が有名ですね。ネガティブマージンを使った方法は以下のようなものです。

子要素を上下左右中央に揃える

1
2
3
4
5

<div class="box">
   <div class="centered">
   <p>CSSで上下左右真ん中に配置されます</p>
   </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.box{ 
  position:rerative;
  background-color:#CCC;
  min-width: 300px; 
  min-height: 240px;  
 }
.centered {
  position: absolute;
  width:300px;
  height:240px;
  margin-top:-120px;
  margin-left:-150px;
  top: 50%;
  left: 50%;
}

ポイントはboxの横と高さの1/2 をネガティブマージンで指定するところですね。class=”box”に指定しているmin-widthはブラウザのウィンドウサイズをboxの大きさよりも小さくした時の対策です。これが無いとカラム落ちのような状態になってしまいます。

このやり方のネックは中央に配置される子要素のboxの幅と高さをCSSで指定しないと使えないという点です。例えば、内包する子要素が画像で色々なサイズがある場合や、内包するコンテンツが増減してBoxの高さが変化する場合などは逐一CSSの幅と高さを指定し直さないといけないのでかなり面倒です。display:tableを用いたセンタリングでもそういったことを解消してくれますが、これから紹介する第３の方法でも可能です。

子要素の大きさをCSSで指定しなくてもOKなセンタリング

疑似要素:beforeを用いて要素を生成する

このやり方はCSS Trickに載っていたものですが、日本語ではみかけなかったのでご紹介します。

上下左右センタリングする子要素にテキストなどが入る場合のサンプル

中にテキストが入っていて、高さが変化するボックスの場合の例です。この例では親要素のclass=”box”の横幅のみwidthで指定しますが、bodyを親要素とする場合はwidth=”100%”を指定してください。

<div class="box">
   <div class="centered">
       <p>テキストテキストテキスト。テキストテキストテキスト</p>
   </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.box { 
  text-align: center;
  height:300px;
  min-width:410px;
}
 
.box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
}

ポイントはbefore擬似要素とcontentプロパティを使って中央配置する要素の前にダミー要素を生成しそれを上手く利用してセンタリングを実現しています。この方法であれば中央配置する子要素の高さが変化しても大丈夫です。

上下左右センタリングする子要素が画像の場合

<div class="box">
<img src="samplejpg" alt="" width="300" height="240" class="centered">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.box { 
  text-align: center;
  background-color:#FFF;
  height:400px;
  min-width:410px;
}
 
.box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
  background-color:#F00;
}
 
.centered {
  display: inline-block;
  vertical-align:middle;
}

画像のような固定幅をもつ要素でも大丈夫です。この方法はCSS側で子要素のwidthとheightを指定する必要が無いので汎用性があります。

ただしbefore擬似要素に対応していないIE7以下では使えません。それ以外のモダンブラウザ及びIE8以上であれば使うことが出来ます。使い所としてはスマートフォンサイトで要素を中央表示させたい時とかブログのテンプレ作成などでしょうか。

IE6がもう少しで絶滅してくれそうなので、MSさんにはIE7の駆逐…じゃなかったバージョンアップの周知やブラウザのUPdateキャンペーンなどを頑張って貰いたいところです。

コメントをどうぞ