diving marginの上端と下端の中央揃え

Question

私はマージントップとマージンボトムを中心にして、<div>を取得しようとしています。私が書いたこのJavaScriptは動作します。ただし、サイトが一度キャッシュされている場合は、CTRL + F5 refreshを入力すると、スクリプトは間違ったclientHeightを受け取ることになります。 2番目の時間をリフレッシュし、正しいclientHeightを取得します。

私はwindow.loadを使用しようとしましたが、これは動作します。しかし、遅くて<div>がロードされ、2秒後に真ん中に移動します。

<script type="text/javascript"> 
    var height = $(window).height(); 
    var clientHeight = document.getElementById('account-wall').clientHeight; 
    var calc_height = (height - clientHeight)/2; 
    document.getElementById("account-wall").style.marginTop = calc_height + 'px'; 
    document.getElementById("account-wall").style.marginBottom = calc_height + 'px'; 
</script> 


<script type="text/javascript"> 
    $(window).load(function() { 
    var height = $(window).height(); 
    console.log(height); 
    var clientHeight = $('.account-wall').height(); 
    console.log(clientHeight); 
    var calc_height = (height - clientHeight)/2; 
    document.getElementById("account-wall").style.marginTop = calc_height + 'px'; 
    document.getElementById("account-wall").style.marginBottom = calc_height + 'px'; 
    }); 
</script> 

Answer 1

window.heightが変更されても、中央に配置する必要があるので、resizeイベントを使用してください。これが最初から中心になっていることを確認するには、.resize（）を使用してイベントをトリガーします。 50％を：

$(window).on('resize', function(event){ 
    var height = $(window).height(); 
    console.log(height); 
    var clientHeight = $('.account-wall').height(); 
    console.log(clientHeight); 
    var calc_height = (height - clientHeight)/2; 
    document.getElementById("account-wall").style.marginTop = calc_height+'px'; 
    document.getElementById("account-wall").style.marginBottom =   calc_height+'px'; 
}).resize();