ウィンドウサイズが変更されたときに要素の位置を変更するにはどうすればよいですか？

Question

私はHTMLで単純な検索のフォームを持っている：それは一回のみ動作します

$(document).ready(function() { 
    mainWindowInCenter(); 
}); 

function mainWindowInCenter() { 
    $('.mainWindow').css('position','fixed'); 
    $('.mainWindow').css("left", ($(window).width()/2-$('.mainWindow').width()/2) + "px"); 
    $('.mainWindow').css("top", ($(window).height()/2-$('.mainWindow').height()/2) + "px"); 
}; 

しかし：

<div class="mainWindow"> 
    <form action="#"> 
     <input type="text" id="query" placeholder="Search..." autofocus required /> 
     <input type="button" id="button" value="SEARCH" /> 
    </form> 
</div> 

は、私は変更のためのjQueryのコードウィンドウの中央にデフォルトの位置のメインウィンドウのdiv要素を使いますと私のブラウザのウィンドウを変更すると、divはスクリプトの後に同じ位置にとどまります。

divの変更は、ウィンドウのサイズが変更されている間も常に変化しますか？
ウィンドウのサイズを何とかトレースできますか？例：

$(window).on('resize', function() { 
    mainWindowInCenter(); 
}); 

function mainWindowInCenter() { 
    $('.mainWindow').css({ 
    position: 'fixed', 
    left: $(window).width()/2 - $('.mainWindow').width()/2, 
    top: $(window).height()/2 - $('.mainWindow').height()/2 
    }); 
} 

あなたもされるであろう、だけではCSSを使用して同じ効果を実現することができる場合があります

$(document).ready(function() { 
    if (window.size.isChange()) { 
    mainWindowInCenter(); 
    }; 
}); 

Answer 1

あなたは窓がresizeイベントにフックしてリサイズされるたびに、あなたの関数を呼び出すことができますより好ましい。しかし、それが可能かどうかは、あなたのHTML構造に依存します。

Answer 2

これにはJavaScriptを使用しないでください。

あなたの要素は、静的な幅/高さであるならば、あなたはそれに次のCSS与えることができますする必要があります

.mainWindow { 
    position: fixed; 
    width: 500px; 
    height: 200px; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; /* Negative half of height. */ 
    margin-left: -250px; /* Negative half of width. */ 
} 

をそして、それはちょうどかかわらず、ウィンドウイベントの、センタリングされるだろう、とパフォーマンスの問題からあなたを救いますresizeイベントにバインドするとき。