今回は可変する要素を上下中央寄せにする方法です。
CSSでも可能ですが、今回はあえてJqueryでする方法を記載します。
自作でモーダルウインドウなどを実装する際には参考にしてください。
本文にhtmlを追加
<div id="wrap">
<main id="indexCenter">
<p>Dummy TextDummy TextDummy TextDummy TextDummy TextDummy Text</p>
</main>
</div>
下記scriptをheadかbodyどちらかに追加
$(window).load(function() {
var ih = ($(window).height() – $("#wrap").outerHeight(true) ) /2;
$("#indexCenter").css("margin-top", ih + "px"); });
var timer = false; $(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
var ih = ($(window).height() – $("#wrap").outerHeight(true) ) /2;
$("#indexCenter").css("margin-top", ih + "px");
}, 200);
});
1, まず【#indexCenter】の高さを取得します。
2, 次に【#wrap】に【Windowの高さ】-【#indexCenterの高さ】の値を計算します。
3, 最後に取得した値÷2をしmargin-topに出力します。