在web標(biāo)準(zhǔn)中的頁面布局是使用div配合css來實(shí)現(xiàn)的。這其中最常用到的就是使整個(gè)頁面水平居中的效果，這是在頁面布局中基本，也是最應(yīng)該首先掌握的知識。不過，還是經(jīng)常會有人問到這個(gè)問題，在這里我簡單總結(jié)一下使用div和css實(shí)現(xiàn)頁面水平居中的方法：
在現(xiàn)代瀏覽器（如internet explorer 7、firefox、opera等）現(xiàn)代瀏覽器實(shí)現(xiàn)水平居中的方法很簡單，只要設(shè)定到左右兩側(cè)的空白為自動即可。意即：
上面這段代碼的意思是說使wrap這個(gè)div到左右兩側(cè)的距離自動設(shè)置，上下為0（可以為任意）。請?jiān)诂F(xiàn)代瀏覽器（如internet explorer 7、firefox、opera等）中運(yùn)行現(xiàn)在的代碼：
<!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等現(xiàn)代瀏覽器設(shè)定頁面元素的水平居中，只要指定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及改正的版本中是不起作用的，不過幸好它有自己的解決辦法。在internet explorer中text-align屬性是可繼承的，即在父元素中設(shè)置后在子元素中就默認(rèn)具有了該屬性。因此我們可以在body標(biāo)簽中設(shè)置text-align屬性值為center，這樣頁面內(nèi)所有的元素都會自動居中，同時(shí)我們還要加一個(gè)hook把頁面中的文字變成我們習(xí)慣的閱讀方式——居左對齊。因此我們要如此來寫代碼：
這樣在internet explorer中我們就輕松實(shí)現(xiàn)了div的居中對齊。因此要在所有的瀏覽器中顯示居中的效果，我們就可以這樣寫我們的代碼：
<!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í)現(xiàn)水平居中對齊的頁面布局 </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等現(xiàn)代瀏覽器設(shè)定頁面元素的水平居中，只要指定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>
</body>
</html>
不過這里有一個(gè)前提，就是設(shè)置居中的元素要有固定的寬度，比如這里我們設(shè)定了為760像素。
對于wrap進(jìn)行相對定位，然后使用負(fù)的邊距抵消偏移量。這種方法比較簡單還很容易實(shí)現(xiàn)：
這段代碼的意思是，設(shè)置wrap的定位是相對于其父元素body標(biāo)簽的，然后將其左邊框移動到頁面的正中間（也就是left:50%含意）；最后我們再從中間位置向左偏移回一半的距離來，這樣就實(shí)現(xiàn)了水平居中了。
<!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í)現(xiàn)水平居中對齊的頁面布局 </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>
同樣，在設(shè)定水平居中前你需要設(shè)定一個(gè)固定的寬度。
p.s.究竟選擇哪個(gè)方法？
上面兩個(gè)方法究竟選擇哪種方法好呢？在第一種方法中貌似使用了hack技術(shù)，其實(shí)并沒有，它是中規(guī)中矩的web標(biāo)準(zhǔn)寫法，完全符合規(guī)范，因此，兩個(gè)種方法中完全可以隨便的選取其中的任一種進(jìn)行使用，他們不存在css hack的問題。
上面所說的都是設(shè)定了具體寬度的情況下水平居中的實(shí)現(xiàn)。有時(shí)候我們想做一個(gè)彈性布局，或者當(dāng)一個(gè)元素處于一個(gè)容器中時(shí)我們只想讓它居中并不想設(shè)定一個(gè)具體的寬度。其實(shí)這并不是真正的居中布局，就像對一個(gè)100%長度的元素來說，你說它是居中對齊還是居左對齊呢？所以所有不高寬度的居中都不是真正的居中。這樣的設(shè)計(jì)我們是使用的像元素的padding來設(shè)置的，實(shí)際中我們是改變了父元素的容器大小：
如我們希望wrap元素長度隨窗口而改變，同時(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> 隨瀏覽器窗口大小而改變的具有彈性的居中布局 </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;
}
這里，我們只需要保持父元素左右兩側(cè)的填充是相等的就可以了。
</pre>
</div>
</body>
</html>
當(dāng)然這只是“貌似居中”，不過卻常常很有用處。
新聞熱點(diǎn)
疑難解答
圖片精選
