1 2 3 4 |
<div> <h1>タイトル</h1> <p>テキスト</p> </div> |
1 2 3 4 5 6 7 |
body { position:relative; } div { position:absolute; top:50%; } |
1 2 3 4 5 6 7 8 |
$(function(){ var wH = $(window).innerHeight(); //ブラウザの高さを取得 var divH = $("div").innerHeight(); //divの高さを取得 $("body").css("height", wH + "px"); //bodyにブラウザの高さを代入 $("div").css("margin-top", "-" + divH / 2 + "px"); //divの半分の値のネガティブマージンを代入 }); |
CSSで要素を上下中央に配置する方法
・ブロック要素内のインライン要素を中央配置したい場合
上下中央に配置したい要素がインライン要素の場合は、”display:table-cell”をうまく使いましょう。 “vertical-align:middle”はインライン要素とテーブルセルにしか適用されません。 やってしまいがちなのが下記のようなブロック要素への指定です。 html
1 2 3 |
<div> <p>サンプル</p> </div> |
1 2 3 4 |
p { height:200px; vertical-align:middle; } |
1 2 3 4 5 6 7 8 |
div { display:table; } p { display:table-cell; height:200px; vertical-align:middle; } |
・要素の高さが決まっているブロック要素自体を中央配置したい場合
要素の高さが決まっているときは、冒頭で述べたように”margin-top”に高さの半分のネガティブマージンを指定すれば上下中央に配置することができます。 html
1 2 3 4 |
<div> <h1>タイトル</h1> <p>テキスト</p> </div> |
1 2 3 4 5 6 7 8 9 |
body { position:relative; } div { height:200px; position:absolute; top:50%; margin-top:-100px; } |
・要素の高さが決まっていないブロック要素自体を中央配置したい場合
こちらはcss3を使った方法なので、IE8は未対応です。 「vh」とは「viewport height」の略で、100vh=ブラウザの高さとなります。 html
1 2 3 4 |
<div> <h1>タイトル</h1> <p>テキスト</p> </div> |
1 2 3 4 5 6 7 8 9 |
body { position:relative; height:100vh; } div { position:absolute; top:50%; transform:translateY(-50%); } |