在Web標(biāo)準(zhǔn)中的頁(yè)面布局是使用Div配合CSS來(lái)實(shí)現(xiàn)的。這其中常用到的就是使整個(gè)頁(yè)面水平居中的效果，這是在頁(yè)面布局中基本，也是應(yīng)該首先掌握的知識(shí)。不過(guò)，還是經(jīng)常會(huì)有人問(wèn)到這個(gè)問(wèn)題，在這里我簡(jiǎn)單總結(jié)一下使用Div和CSS實(shí)現(xiàn)頁(yè)面水平居中的方法：

　　一、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)在的代碼：

　　在Firefox等現(xiàn)代瀏覽器設(shè)定頁(yè)面元素的水平居中，只要指定margin:0 auto;即可

　　div#wrap {

　　width:760px;

　　margin:0 auto; /*這里的0可以任意值*/

　　border:1px solid #ccc;

　　background-color:#999;

　　}

　　上面的效果很好。但是這在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)寫(xiě)代碼：

　　body {text-align:center;}

　　#wrap {text-align:left;}

　　這樣在Internet Explorer中我們就輕松實(shí)現(xiàn)了Div的居中對(duì)齊。因此要在所有的瀏覽器中顯示居中的效果，我們就可以這樣寫(xiě)我們的代碼：

　　body { text-align:center; }

　　#wrap { text-align:left;

　　margin:0 auto;

　　}

　　在Firefox等現(xiàn)代瀏覽器設(shè)定頁(yè)面元素的水平居中，只要指定margin:0 auto;即可

　　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;

　　}

　　不過(guò)這里有一個(gè)前提，就是設(shè)置居中的元素要有固定的寬度，比如這里我們?cè)O(shè)定了為760像素。