在頁面加載時水平和垂直居中DIV

Question

如何在加載頁面時立即將水平和垂直居中放置DIV？

我目前使用下述溶液：

HTML：

<div class="container"> 
    <div class="visitorSelect"> 
    <a href="/visitorLog/boeing"> 
     <div class="tile double icon bg-color-blue"> 
     <div class="tile-content"> 
      <i class="icon-plane"></i> 
     </div> 
     <div class="brand"> 
      <span class="name">Employee</span> 
     </div> 
     </div> 
    </a> 

    <a href="/visitorLog/guest"> 
     <div class="tile double icon bg-color-orange"> 
     <div class="tile-content"> 
      <i class="icon-group"></i> 
     </div> 
     <div class="brand"> 
      <span class="name">Guest</span> 
     </div> 
     </div> 
    </a> 
    </div> <!-- visitorSelect --> 
</div> <!-- container --> 

的JavaScript：

<script> 
$(document).ready(function() 
{ 
    $(window).resize(function() 
    { 
    $('.visitorSelect').css(
    { 
     position: 'absolute', 
     left: ($(window).width() - $('.visitorSelect').outerWidth())/2, 
     top: ($(window).height() - $('.visitorSelect').outerHeight())/2 
    }); 
    }); 

    // call `resize` to center elements 
    $(window).resize(); 
}); 
</script> 

當我最初加載頁面時，DIV到中心演出在頁面的右側並略低於垂直的中心。但是，當我手動調整頁面大小時，它會捕捉到，它應該在之間。

在文檔加載時，需要採取哪些附加步驟才能使對中元素正確放置元素？

Answer 1

你計算寬度前.visitor元素設置爲絕對定位。

默認情況下，靜態div會伸展到父級的全部寬度;絕對的div不會。這是搞亂你的第一次計算。

您應該在CSS或ready（）函數中設置resize事件函數外部的位置css規則。以下是修改代碼最少的更改：

$(document).ready(function() 
{ 
    $(window).resize(function() 
    { 
    $('.visitorSelect').css(
    { 
     position: 'absolute' 
    }); 

    $('.visitorSelect').css(
    { 
     left: ($(window).width() - $('.visitorSelect').outerWidth())/2, 
     top: ($(window).height() - $('.visitorSelect').outerHeight())/2 
    }); 
    }); 

    // call `resize` to center elements 
    $(window).resize(); 
}); 

Answer 2

你應該定位DIV一旦頁面加載：

<script> 
$(document).ready(function() 
{ 
    $('.visitorSelect').css(
    { 
     position: 'absolute', 
     left: ($(window).width() - $('.visitorSelect').outerWidth())/2, 
     top: ($(window).height() - $('.visitorSelect').outerHeight())/2 
    }); 

    $(window).resize(function() 
    { 
    $('.visitorSelect').css(
    { 
     position: 'absolute', 
     left: ($(window).width() - $('.visitorSelect').outerWidth())/2, 
     top: ($(window).height() - $('.visitorSelect').outerHeight())/2 
    }); 
    }); 

    // call `resize` to center elements 
    $(window).resize(); 
}); 
</script> 

Answer 3

除非這是某種模式，或一些不尋常的，我也不會用腳本這樣做完全是在CSS保證金自動會爲工作這個。這裏是一個教程http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

這裏是CSS的例子：

div.container{ 
    width:100%; 
    height:100%; 
} 
div.visitorSelect { 
    width:200px; 
    height:200px; 
    margin:auto; 
}