WebTecNote

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

最近多用するので…。

要素の全画面化について

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

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

絶対配置は、position:absoluteを指定した上で
4方向の位置を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としています。

パターン1 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;
}

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

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

使える条件

スタイル

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

パターン2ー2 フレキシブルボックス(2015仕様)

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

スタイル

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

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

パターン3 display:table-cell

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

使える条件

スタイル

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

パターン4 translate

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

使える条件

スタイル

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

パターン5 基準点を作る

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

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

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

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

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