WebTecNote

[css] CSS3時代の上下中央に配置するパターン

Tenderfeel

最近多用するので…。

要素の全画面化について

先に親になる要素を画面いっぱいに広げる方法について補足しておく。

大きく分けると絶対配置とサイズ指定の２つある。

絶対配置は、position:absoluteを指定した上で
４方向の位置を0（または任意の値）にする。

#wrapper {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

サイズ指定は、widthとheightを指定するだけだが、
対象の要素だけでなくその親も高さと横幅がないと指定したサイズにならない。
特に高さについての指定がハマりやすい。

単純にbody直下に要素を配置しただけの場合、

<body>
<div id="wrapper"></div>
</body>

htmlとbodyもheightを指定してないと画面いっぱいに広がらない。

html, body, #wrapper {
  width:100%;
  height:100%;
}

親が増えれば親要素の数だけ指定も増える。

以下からの説明では、中央に配置したい要素を#box、
その直接の親要素を#wrapperとしています。

パターン１ position:absolute

一番お手軽で対応ブラウザも幅広い。

使える条件

スタイル

#boxをposition:absolute、top:50%、left:50%にしてから
widthとheightの半分だけmargin-topとmargin-leftをマイナスにする。
位置を中央からずらしたいときはmarginの値を変えるだけ。

事前にサイズがわからないor可変である場合、top～leftまですべて0にしたうえでmargin:autoにすると中央配置にできる。

#box{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}

パターン２　フレキシブルボックス

CSS3のflexboxに対応しているブラウザのみ。スマホ用。

使える条件

スタイル

親(#wrapper)をdisplay:boxにして、box-pack:center、 box-align:centerにする。
#boxのサイズが変わっても常に位置がキープされるが、display:boxに対応していないブラウザには効かない。

パターン２ー２　フレキシブルボックス（2015仕様）

CSS3の2015年仕様のflexboxに対応しているブラウザのみ。
使える条件は旧仕様と同じ。

スタイル

複数の要素を上下左右にセンタリングする

#wrapper {
    flex-flow: column wrap;
    align-self: center;
    justify-content: center;
    align-items: center;
}

パターン３　display:table-cell

レガシーブラウザは未対応。

使える条件

スタイル

#wrapperをdisplay:table-cellにする。
場合によってはその親をdisplay:tableにしなければならない。
テーブルのvertical-align:centerを使うものだが、vertical-alignの効果対象がインライン要素であるため、ブロック要素には効果がない。

パターン４　translate

CSS3のtranslateに対応しているブラウザのみ有効。

使える条件

スタイル

パターン１の方法で、marginの代わりにtranslate(-50%, -50%)を使うだけ。
translateの-50%という指定は要素のwidthとheightの-50%になるため、どんなサイズになっても中央をキープする。

パターン５　基準点を作る

アニメーションしたいときに。

パターン４で中央に配置したい要素(#box)にtranslateを使ってしまうと、それをtranslateでアニメーションしたいときに困る。
なので、

  1. 対象(#box)に親要素(#point)を１つ追加
  2. #pointを基準となる位置に配置（パターン１とか４で）
  3. #boxを#pointを基準にして配置

とする。
これで#boxにアニメーションをつけると、
#pointが画面に追随するので#boxが常に同じ位置を基準にして動くようになります。
基準点をずらしたいときはmarginを使う。

モバイルバージョンを終了