高さが決まっていなくてもCSS3で中央寄せする方法
水平方向には中央寄せに比較的簡単にできますが、
高さが決まっていないときに垂直方向に中央寄せするときって悩みますよね。。。
こんばんわ。IE6対応のときに死にそうになりながらCSSコーディングしてたたくみです。
今回はモダンブラウザ限定のテクニックですが、CSS3を使って
高さが決まっていなくても垂直水平中央にレイアウトできるCSSをご紹介したいと思います。
中央寄せにする高さが不明のhtml
まずは、サンプルのHTMLを用意します。
| index.htm | |
|---|---|
| 1 | <!doctype html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <title>center</title> |
| 6 | <link rel="stylesheet" href="flex.css"> |
| 7 | </head> |
| 8 | |
| 9 | <body> |
| 10 | <div class="contentsWrapper"> |
| 11 | <div class="contents"> |
| 12 | <p>このように</p> |
| 13 | <p>幅と</p> |
| 14 | <p>高さが</p> |
| 15 | <p>決まっていなくても垂直水平中央に</p> |
| 16 | <p>できます</p> |
| 17 | </div> |
| 18 | </div> |
| 19 | </body> |
| 20 | </html> |
シンプルですが、このように高さが不明なhtml、よくありますよね…
では、CSSを書いてきましょう！
positionとtransformを使う方法
| position.css | |
|---|---|
| 1 | html, body { |
| 2 | height: 100%; |
| 3 | } |
| 4 | |
| 5 | .contentsWrapper { |
| 6 | height: 100%; |
| 7 | position: relative; |
| 8 | } |
| 9 | |
| 10 | .contents { |
| 11 | position: absolute; |
| 12 | top: 50%; |
| 13 | left: 50%; |
| 14 | transform: translate(-50%, -50%); |
| 15 | } |
たった15行でできましたね。CSSだけに限ればなんと7行です。
ポイントは、html,body,.contentsWrapperにheight: 100%;を指定しているところです。
このheightを忘れると垂直方向に中央になりませんので注意してください。
top: 50%; と left: 50%; でボックスの左上の座標を垂直水平中央に配置した後、
transform: translate(-50%, -50%); で contents ボックスの長さおよび高さの半分を
ネガティブ方向に半分ずらして、中央配置を実現しています。
flexボックスを使う方法
| flex.css | |
|---|---|
| 1 | html, body, .contentsWrapper { |
| 2 | height: 100%; |
| 3 | } |
| 4 | .contentsWrapper { |
| 5 | display: flex; |
| 6 | flex-direction: column; |
| 7 | justify-content: center; |
| 8 | align-items: center; |
| 9 | } |
flexを使っても同じことができます。
こちらも、positionを使った方法と同様に、
html,body,.contentsWrapperにheight: 100%;を指定します。
contentsWrapperをflexボックスに指定したあと、
flex-directionで子要素を縦方向に並べ、
justify-contentとalign-itemsで中央に寄せます。
こちらのほうがスッキリしていますので、筆者はflexを使ってよく中央に寄せています。
おまけ (中の文章も中央揃えにする方法)
pタグで囲まれたテキストも中央に寄せることができます。
下記のCSSを追加してみてください。
| 追加するCSS | |
|---|---|
| 1 | p { |
| 2 | text-align: center; |
| 3 | } |
