在Web標準中的頁(yè)面布局是使用Div配合CSS來(lái)實(shí)現的。這其中最常用到的就是使整個(gè)頁(yè)面水平居中的效果，這是在頁(yè)面布局中基本，也是最應該首先掌握的知識。不過(guò)，還是經(jīng)常會(huì )有人問(wèn)到這個(gè)問(wèn)題，在這里我簡(jiǎn)單總結一下使用Div和CSS實(shí)現頁(yè)面水平居中的方法：
一、margin:auto 0 與 text-aligh:center
在現代瀏覽器（如Internet Explorer 7、Firefox、Opera等）現代瀏覽器實(shí)現水平居中的方法很簡(jiǎn)單，只要設定到左右兩側的空白為自動(dòng)即可。意即：
#wrap { margin:0 auto;}
上面這段代碼的意思是說(shuō)使wrap這個(gè)div到左右兩側的距離自動(dòng)設置，上下為0（可以為任意）。請在現代瀏覽器（如Internet Explorer 7、Firefox、Opera等）中運行現在的代碼：
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞ new document ＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜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等現代瀏覽器設定頁(yè)面元素的水平居中，只要指定margin:0 auto;即可
＜pre＞
div#wrap {
width:760px;
margin:0 auto; /*這里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
上面的效果很好。但是這在Internet Explorer 6及改正的版本中是不起作用的，不過(guò)幸好它有自己的解決辦法。在Internet Explorer中text-align屬性是可繼承的，即在父元素中設置后在子元素中就默認具有了該屬性。因此我們可以在body標簽中設置text-align屬性值為center，這樣頁(yè)面內所有的元素都會(huì )自動(dòng)居中，同時(shí)我們還要加一個(gè)hook把頁(yè)面中的文字變成我們習慣的閱讀方式——居左對齊。因此我們要如此來(lái)寫(xiě)代碼：
body {text-align:center;}
#wrap {text-align:left;}
這樣在Internet Explorer中我們就輕松實(shí)現了Div的居中對齊。因此要在所有的瀏覽器中顯示居中的效果，我們就可以這樣寫(xiě)我們的代碼：
body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞ CSS+Div實(shí)現水平居中對齊的頁(yè)面布局 ＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜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＞
＜/head＞
＜body＞
＜div id="wrap"＞
在Firefox等現代瀏覽器設定頁(yè)面元素的水平居中，只要指定margin:0 auto;即可
＜pre＞
div#wrap {
width:760px;
margin:0 auto; /*這里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}
在Internet Explorer 6 及以下的版本中我們還要做以下的設置：
body { text-align:center; }
div#wrap {
text-align:left;
}
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
不過(guò)這里有一個(gè)前提，就是設置居中的元素要有固定的寬度，比如這里我們設定了為760像素。
二、相對定位與負的邊距
對于wrap進(jìn)行相對定位，然后使用負的邊距抵消偏移量。這種方法比較簡(jiǎn)單還很容易實(shí)現：
#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px
}
這段代碼的意思是，設置wrap的定位是相對于其父元素body標簽的，然后將其左邊框移動(dòng)到頁(yè)面的正中間（也就是left:50%含意）；最后我們再從中間位置向左偏移回一半的距離來(lái)，這樣就實(shí)現了水平居中了。
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞ CSS+Div實(shí)現水平居中對齊的頁(yè)面布局 ＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜style type="text/css"＞
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #333;
background-color:#ccc;
}
＜/style＞
＜/head＞
＜body＞
＜div id="wrap"＞
在所有瀏覽器中都有效的方法：
＜pre＞
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #333;
background-color:#ccc;
}
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
同樣，在設定水平居中前你需要設定一個(gè)固定的寬度。
P.S.究竟選擇哪個(gè)方法？
上面兩個(gè)方法究竟選擇哪種方法好呢？在第一種方法中貌似使用了Hack技術(shù)，其實(shí)并沒(méi)有，它是中規中矩的Web標準寫(xiě)法，完全符合規范，因此，兩個(gè)種方法中完全可以隨便的選取其中的任一種進(jìn)行使用，他們不存在CSS hack的問(wèn)題。
三、其它的居中方式
上面所說(shuō)的都是設定了具體寬度的情況下水平居中的實(shí)現。有時(shí)候我們想做一個(gè)彈性布局，或者當一個(gè)元素處于一個(gè)容器中時(shí)我們只想讓它居中并不想設定一個(gè)具體的寬度。其實(shí)這并不是真正的居中布局，就像對一個(gè)100%長(cháng)度的元素來(lái)說(shuō)，你說(shuō)它是居中對齊還是居左對齊呢？所以所有不高寬度的居中都不是真正的居中。這樣的設計我們是使用的像元素的padding來(lái)設置的，實(shí)際中我們是改變了父元素的容器大?。?
如我們希望wrap元素長(cháng)度隨窗口而改變，同時(shí)又維持居中，我們就可以這樣寫(xiě)：
body {
padding:10px 150px;
}
這里，我們只需要保持父元素左右兩側的填充是相等的就可以了。
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞ 隨瀏覽器窗口大小而改變的具有彈性的居中布局 ＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜style type="text/css"＞
body {
padding:10px 150px;
}
div#wrap {
border:1px solid #333;
background-color:#ccc;
}
＜/style＞
＜/head＞
＜body＞
＜div id="wrap"＞
一種隨瀏覽器窗口大小而改變的具有彈性的居中布局：
＜pre＞
body {
padding:10px 150px;
}
這里，我們只需要保持父元素左右兩側的填充是相等的就可以了。
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
當然這只是“貌似居中”，不過(guò)卻常常很有用處。
聯(lián)系客服
