CSS網(wǎng)頁(yè)布局DIV水平居中的各種方法.doc

CSS網(wǎng)頁(yè)布局DIV水平居中的各種方法一、margin:auto 0 與 text-aligh:center 在現(xiàn)代瀏覽器（如Internet Explorer 7、Firefox、Opera等）現(xiàn)代瀏覽器實(shí)現(xiàn)水平居中的方法很簡(jiǎn)單，只要設(shè)定到左右兩側(cè)的空白為自動(dòng)即可。意即： #wrap margin:0 auto; 上面這段代碼的意思是說(shuō)使wrap這個(gè)div到左右兩側(cè)的距離自動(dòng)設(shè)置，上下為0（可以為任意）。請(qǐng)?jiān)诂F(xiàn)代瀏覽器（如Internet Explorer 7、Firefox、Opera等）中運(yùn)行現(xiàn)在的代碼： style type=text/css div#wrap width:760px; margin:0 auto; border:1px solid #333; background-color:#ccc; /style /head body div id=wrap 在Firefox等現(xiàn)代瀏覽器設(shè)定頁(yè)面元素的水平居中，只要指定margin:0 auto;即可 pre div#wrap width:760px; margin:0 auto; /*這里的0可以任意值*/ border:1px solid #ccc; background-color:#999; /pre /div 上面的效果很好。但是這在Internet Explorer 6及改正的版本中是不起作用的，不過(guò)幸好它有自己的解決辦法。在Internet Explorer中text-align屬性是可繼承的，即在父元素中設(shè)置后在子元素中就默認(rèn)具有了該屬性。因此我們可以在body標(biāo)簽中設(shè)置text-align屬性值為center，這樣頁(yè)面內(nèi)所有的元素都會(huì)自動(dòng)居中，同時(shí)我們還要加一個(gè)hook把頁(yè)面中的文字變成我們習(xí)慣的閱讀方式居左對(duì)齊。因此我們要如此來(lái)寫代碼： body text-align:center; #wrap text-align:left; 這樣在Internet Explorer中我們就輕松實(shí)現(xiàn)了Div的居中對(duì)齊。因此要在所有的瀏覽器中顯示居中的效果，我們就可以這樣寫我們的代碼： body text-align:center; #wrap text-align:left; margin:0 auto; style type=text/css body text-align:center; div#wrap text-align:left; width:760px; margin:0 auto; border:1px solid #333; background-color:#ccc; /style div id=wrap 在Firefox等現(xiàn)代瀏覽器設(shè)定頁(yè)面元素的水平居中，只要指定margin:0 auto;即可 pre div#wrap width:760px; margin:0 auto; /*這里的0可以任意值*/ border:1px solid #ccc; background-color:#999; 在Internet Explorer 6 及以下的版本中我們還要做以下的設(shè)置： body text-align:center; div#wrap text-align:left; /pre /div 不過(guò)這里有一個(gè)前提，就是設(shè)置居中的元素要有固定的寬度，比如這里我們?cè)O(shè)定了為760像素。二、相對(duì)定位與負(fù)的邊距 對(duì)于wrap進(jìn)行相對(duì)定位，然后使用負(fù)的邊距抵消偏移量。這種方法比較簡(jiǎn)單還很容易實(shí)現(xiàn)： #wrap position:relative; width:760px; left:50%; margin-left:-380px 這段代碼的意思是，設(shè)置wrap的定位是相對(duì)于其父元素body標(biāo)簽的，然后將其左邊框移動(dòng)到頁(yè)面的正中間（也就是left:50%含意）；最后我們?cè)購(gòu)闹虚g位置向左偏移回一半的距離來(lái)，這樣就實(shí)現(xiàn)了水平居中了。 style type=text/css div#wrap position:relative; width:760px; left:50%; margin-left:-380px; border:1px solid #333; background-color:#ccc; /style div id=wrap 在所有瀏覽器中都有效的方法： pre div#wrap position:relative; width:760px; left:50%; margin-left:-380px; border:1px solid #333; background-color:#ccc; /pre /div 同樣，在設(shè)定水平居中前你需要設(shè)定一個(gè)固定的寬度。 P.S.究竟選擇哪個(gè)方法？ 上面兩個(gè)方法究竟選擇哪種方法好呢？在第一種方法中貌似使用了Hack技術(shù)，其實(shí)并沒(méi)有，它是中規(guī)中矩的Web標(biāo)準(zhǔn)寫法，完全符合規(guī)范，因此，兩個(gè)種方法中完全可以隨便的選取其中的任一種進(jìn)行使用，他們不存在CSS hack的問(wèn)題。三、其它的居中方式 上面所說(shuō)的都是設(shè)定了具體寬度的情況下水平居中的實(shí)現(xiàn)。有時(shí)候我們想做一個(gè)彈性布局，或者當(dāng)一個(gè)元素處于一個(gè)容器中時(shí)我們只想讓它居中并不想設(shè)定一個(gè)具體的寬度。其實(shí)這并不是真正的居中布局，就像對(duì)一個(gè)100%長(zhǎng)度的元素來(lái)說(shuō)，你說(shuō)它是居中對(duì)齊還是居左對(duì)齊呢？所以所有不高寬度的居中都不是真正的居中。這樣的設(shè)計(jì)我們是使用的像元素的padding來(lái)設(shè)置的，實(shí)際中我們是改變了父元素的容器大?。?如我們希望wrap元素長(zhǎng)度隨窗口而改變，同時(shí)又維持居中，我們就可以這樣寫： body padding:10px 150px; 這里，我們只需要保持父元素左右兩側(cè)的填充是相等的就可以了。 style type=text/css body padding:10px 150px; div#wrap border:1px solid #333; background-color:#ccc; /style /head bo