Pocket

「要素を画面の上下中央に配置したいのに、上手くいかない…」、そんな状況に陥ったことがある人も多いのではないでしょうか?
今回ご紹介するのは、“要素の高さが決まっていない”、“IE8にも対応させたい”という場合に使えるjQueryを用いた方法です。
基本的なhtmlとcssは以下です。

html

css

divの高さが決まっている時は、“margin-top”に高さの半分のネガティブマージンを指定すれば上下中央になります。(例:divの高さが100pxなら、“margin-top:-50px”)
高さが決まっていない時でも、下記のようにjQueryで要素の高さを取得して、cssにネガティブマージンを代入すれば上下中央にすることができます。

javascript

その他、cssだけで配置する方法も状況別に3つご紹介します。

CSSで要素を上下中央に配置する方法

・ブロック要素内のインライン要素を中央配置したい場合

上下中央に配置したい要素がインライン要素の場合は、”display:table-cell”をうまく使いましょう。
“vertical-align:middle”はインライン要素テーブルセルにしか適用されません。
やってしまいがちなのが下記のようなブロック要素への指定です。

html

css

ブロック要素のままでは”vertical-align”が効かないので、”display:table-cell”でテーブルセルに指定しましょう。

css

・要素の高さが決まっているブロック要素自体を中央配置したい場合

要素の高さが決まっているときは、冒頭で述べたように”margin-top”に高さの半分のネガティブマージンを指定すれば上下中央に配置することができます。

html

css

・要素の高さが決まっていないブロック要素自体を中央配置したい場合

こちらはcss3を使った方法なので、IE8は未対応です。
「vh」とは「viewport height」の略で、100vh=ブラウザの高さとなります。

html

css

いかがでしょうか?
数値が決まっていない場合でも、jQueryを使えば簡単に取得することができます!他の場面にも応用できると思いますので、ぜひ試してみてください。

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。