居中DIV保證金頂部和底部邊距

我試圖讓邊距和下邊距居中我<div>。我寫的這個JavaScript起作用。但是，如果該站點緩存一次，則CTRL + F5刷新將導致腳本收到錯誤的clientHeight。第二次刷新，檢索正確的clientHeight。居中DIV保證金頂部和底部邊距

我使用window.load嘗試和工作原理。但是，它的速度非常緩慢，以至於在加載之後以及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>

來源

2016-11-10 Thomas Charlesworth

請給一個鏈接到的jsfiddle或上傳到這裏的代碼 –

作爲替代方案，我相信你可以垂直或水平居中一個div使用標準的CSS和設置利潤率：50％。這可能是更簡單的解決方案。 Google for css垂直對齊div或類似。 –

請添加'html'和'css'。或者，簡而言之，請創建一個[snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）或[bin]（http： //jsbin.com） –

使用調整大小事件，因爲即使window.height發生更改也需要居中。確保它的起始位置是使用.resize（）來觸發事件。

$(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();

來源

2016-11-10 10:10:04

居中DIV保證金頂部和底部邊距

回答

相關問題