我們在設計(jì)頁面的時(shí)候，經常要把DIV居中顯示，而且是相對頁面窗口水(shuǐ)平和(hé)垂直方向居中顯示，如讓登錄窗口居中顯示。我們傳統解決的辦法是用純CSS來(lái)讓DIV居中。在本文中，我将給大(dà)家(jiā)講述如何用CSS和(hé)jQuery兩種方法讓DIV水(shuǐ)平和(hé)垂直居中。

CSS讓DIV水(shuǐ)平居中

說明(míng)，本文中所指的DIV包括HTML頁面中所有(yǒu)的元素。

讓一個(gè)DIV水(shuǐ)平居中，直接用CSS就可(kě)以做(zuò)到。隻要設置了DIV的寬度，然後使用margin設置邊距0 auto，CSS自動算(suàn)出左右邊距，使得(de)DIV居中。

.mydiv{  
    margin:0 auto;  
    width:300px;  
    height:200px;  
}

但(dàn)是如果要使DIV垂直方向也居中，恐怕CSS需要修改了。

CSS實現水(shuǐ)平和(hé)垂直居中

要讓DIV水(shuǐ)平和(hé)垂直居中，必需知道(dào)該DIV得(de)寬度和(hé)高(gāo)度，然後設置位置為(wèi)絕對位置，距離頁面窗口左邊框和(hé)上(shàng)邊框的距離設置為(wèi)50%，這個(gè)50%就是指頁面窗口的寬度和(hé)高(gāo)度的50%，最後将該DIV分别左移和(hé)上(shàng)移，左移和(hé)上(shàng)移的大(dà)小(xiǎo)就是該DIV寬度和(hé)高(gāo)度的一半。

.mydiv{
   width:300px; 
   height:200px; 
   position:absolute; 
   left:50%; 
   top:50%; 
   margin:-100px 0 0 -150px
}

該方法使用普遍，但(dàn)是前提是必需設置DIV的寬度和(hé)高(gāo)度。如果當頁面DIV寬度和(hé)高(gāo)度是動态的，比方說需要彈出一個(gè)DIV層并且要居中顯示，DIV的內(nèi)容是動态的，所以寬度和(hé)高(gāo)度也是動态的，這時(shí)需要用jQuery可(kě)以解決居中。

jQuery實現水(shuǐ)平和(hé)垂直居中

jQuery實現水(shuǐ)平和(hé)垂直居中的原理(lǐ)就是通(tōng)過jQuery設置DIV的CSS，獲取DIV的左、上(shàng)的邊距偏移量，邊距偏移量的算(suàn)法就是用頁面窗口的寬度減去該DIV得(de)寬度，得(de)到的值再除以2即左偏移量，右偏移量算(suàn)法相同。注意DIV的CSS設置要在resize()方法中完成，就是每次改變窗口大(dà)小(xiǎo)時(shí)，都要執行(xíng)設置DIV的CSS，代碼如下：

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

此外在頁面載入時(shí)，就需要調用resize()。

$(function(){
	$(window).resize();
});

此方法的好處就是不需要知道(dào)DIV的具體(tǐ)寬度和(hé)高(gāo)度大(dà)小(xiǎo)，直接用jQuery就可(kě)以實現水(shuǐ)平和(hé)垂直居中，而且兼容各浏覽器(qì)，這個(gè)方法在很(hěn)多(duō)的彈出層效果中應用。