DIV+CSS布局有很多值得學(xué)習(xí)的地方，這里和大家描述一下關(guān)于DIV居中布局的實現(xiàn)方法，主要有三種方法，每種方法都有各自的特點，請看下文詳細介紹，相信通過本文描述你對DIV居中布局一定會有深刻的認識。

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計、做網(wǎng)站與策劃設(shè)計,北京網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:北京等地區(qū)。北京做網(wǎng)站價格咨詢:13518219792

關(guān)于DIV居中布局的幾種實現(xiàn)方法

現(xiàn)在DIV+CSS布局越來越流行了，怎么實現(xiàn)div居中好像是個難題。本文給出關(guān)于DIV居中布局的幾種實現(xiàn)方法,相信會對大家有所幫助.

第一種方法:

 
 
 

  
  
  
body{  
  
  
  
margin:0pxauto;  
  
  
  
text-align:center;  
  
  
  
}  
 
 
 

但是如果沒申明下面這句解析方法,頁面就會出錯.不能居中對齊!

 
 
 

  
  
  
  
  
  
 
  
  
  
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
  
  
  
 
  
  
  
 
 
 
 

但是有時候頁面并不能全部按上面規(guī)定的代碼格式來編寫,比如說要改多彩滾動條.

第二種方法:

 
 
 

  
  
  
　　margin-left:50%;  
  
  
  
　　left:-width/2;  
  
  
  
 
 
 
 

這里的width不是CSS中的Width,而是你的DIV的寬度例如你的div是768px寬，那么你就應(yīng)該設(shè)置left:-384px。

第三種方法:使用JS來控制div居中.

在頁面之中添加了下面的一小段代碼.

 
 
 

  
  
  
  
  
  
 
  
  
  
type="text/javascript"src="function.js"> 
 
 
 

function.js內(nèi)容:

 
 
 

  
  
  
if(window.screen.width>800)  
  
  
  
{document.write(" 
  
  
  
 
  
  
  
body{margin-left:"+(window.screen.width-800)/2+"px}");}  
 
 
 

經(jīng)過測試.可以正常實現(xiàn)DIV居中

補充一點:上面這段JS必須放在你的最后一個CSS連接或的后面.

◆下面是這種方法的詳細講解:

首先解釋一下JS中窗口和網(wǎng)頁的幾種尺寸屬性的含義

document.body.clientWidth（網(wǎng)頁可見區(qū)域?qū)挘菏侵笧g覽器顯示網(wǎng)頁的區(qū)域?qū)挾?，不包括瀏覽器的邊框?qū)挾群痛怪睗L動條的寬度。大小隨著瀏覽器的窗口大小而改變。

document.body.clientHeight（網(wǎng)頁可見區(qū)域高）：是指瀏覽器顯示網(wǎng)頁的區(qū)域所能看到的高度，不包括瀏覽器的邊框?qū)挾群退綕L動條的高度。大小隨著瀏覽器的窗口大小而改變。

document.body.scrollTop（網(wǎng)頁被卷去的高）：是指拉動垂直滾動條時網(wǎng)頁上面被地址欄及菜單欄遮蓋著的部分的高。

document.body.scrollLeft（網(wǎng)頁被卷去的左）：是指拉動水平滾動條時網(wǎng)頁左面被左邊線遮蓋著的部分的寬。#p#

現(xiàn)在我們來分析一下程序該如何實現(xiàn)：

第一步我們要實現(xiàn)的是使層在彈出時絕對DIV居中不去考慮是否有滾動條的情況。

1.計算出層距離顯示區(qū)域左邊和上邊的位置

注意：divId指的是所要居中的層,divId.clientWidth為其寬度?。?/p>

 
 
 

  
  
  
vardivId=document.getElementById("xxx");  
  
  
  
varv_left=(document.body.clientWidth-divId.clientWidth)/2;  
  
  
  
varv_top=(document.body.clientHeight-divId.clientHeight)/2;  
  
  
  
 
 
 
 

2.把得到的值重新賦給DIV的left和top屬性

 
 
 

  
  
  
divId.style.left＝v_left;  
  
  
  
divId.style.top=v_top;  
  
  
  
 
 
 
 

說明：divId為DIV標(biāo)簽的id值，這樣這個層就是DIV居中顯示的了。

第二步我們要實現(xiàn)的是使在拖動滾動條的情況下彈出的層也能居中。

1.其實很簡單我們只要把拖動的寬度和高度加到前面計算出來的左邊距和上邊距中就OK了。

 
 
 

  
  
  
v_left+=document.body.scrollLeft;  
  
  
  
v_top+=document.body.scrollTop;  
  
  
  
 
 
 
 

2.把得到的值重新賦給DIV的left和top屬性

 
 
 

  
  
  
divId.style.left＝v_left;  
  
  
  
divId.style.top=v_top;  
  
  
  
 
 
 
 

這樣顯示出來就是DIV居中的了。

完整代碼如下：

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
test 
  
  
  
test 
  
  
  
test 
  
  
  
test 
  
  
  
test 
  
  
  
test 
  
  
  
 
  
  
  
  
  
  
left:200px;top:30px;width:200px;height:200px;  
  
  
  
background-color:navy;border:2px">我是居中顯示的了。