CSS網頁佈局DIV水準居中的各種方法

在Web標準中的頁面配置是使用Div配合CSS來實現的。 這其中最常用到的就是使整個頁面水準居中的效果，這是在頁面配置中基本，也是最應該首先掌握的知識。 不過，還是經常會有人問到這個問題，在這裡我簡單總結一下使用Div和CSS實現頁面水準居中的方法：

一、margin:auto 0 與 text-aligh:center

在現代瀏覽器（如Internet Explorer 7、Firefox、Opera等）現代瀏覽器實現水準居中的方法很簡單，只要設定到左右兩側的空白為自動即可。 意即：

#wrap { margin:0 auto;}

上面這段代碼的意思是說使wrap這個div到左右兩側的距離自動設置，上下為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等現代瀏覽器設定頁面元素的水準居中，只要指定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屬性是可繼承的，即在父元素中設置後在子項目中就預設具有了該屬性。 因此我們可以在body標籤中設置text-align屬性值為center，這樣頁面內所有的元素都會自動居中，同時我們還要加一個hook把頁面中的文字變成我們習慣的閱讀方式——居左對齊。 因此我們要如此來寫代碼：

body {text-align:center;}
#wrap {text-align:left;}

這樣在Internet Explorer中我們就輕鬆實現了Div的居中對齊。 因此要在所有的瀏覽器中顯示居中的效果，我們就可以這樣寫我們的代碼：

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實現水準居中對齊的頁面配置 ＜/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等現代瀏覽器設定頁面元素的水準居中，只要指定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＞

不過這裡有一個前提，就是設置居中的元素要有固定的寬度，比如這裡我們設定了為760圖元。