CSS+div頁面水平置中的布局方法總結

一、margin:auto 0 與 text-aligh:center
在現代瀏覽器（如Internet Explorer 7、Firefox、Opera等）現代瀏覽器實現水平置中的方法很簡單，只要設定到左右兩側的空白為自動即可。意即：
#wrap { margin:0 auto;}
#wrap { margin:0 auto;}
上面這段代碼的意思是說使wrap這個div到左右兩側的距離自動化佈建，上下為0（可以為任意）。請在現代瀏覽器
（如Internet Explorer 7、Firefox、Opera等）中運行現在的代碼：
上面的效果很好。但是這在Internet Explorer 6及改正的版本中是不起作用的，不過幸好它有自己的解決辦法。在 Internet Explorer中text-align屬性是可繼承的，即在父元素中設定後在子項目中就預設具有了該屬性。因此我們可以在body標籤中設定text- align屬性值為center，這樣頁面內所有的元素都會自動置中，同時我們還要加一個hook把頁面中的文字變成我們習慣的閱讀方式——居靠左對齊。因 此我們要如此來寫代碼：
view plaincopy to clipboardprint?
body {text-align:center;}
#wrap {text-align:left;}
body {text-align:center;}#wrap {text-align:left;}
這樣在Internet Explorer中我們就輕鬆實現了Div的置中對齊。因此要在所有的瀏覽器中顯示置中的效果，我們就可以這樣寫我們的代碼：
view plaincopy to clipboardprint?
body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}
body { text-align:center; }#wrap { text-align:left;             margin:0 auto;}
不過這裡有一個前提，就是設定置中的元素要有固定的寬度，比如這裡我們設定了為760像素。

二、相對定位與負的邊距

    對於wrap進行相對定位，然後使用負的邊距抵消位移量。這種方法比較簡單還很容易實現：
#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px
}
#wrap {position:relative;width:760px;left:50%;margin-left:-380px}
這段代碼的意思是，設定wrap的定位是相對於其父元素body標籤的，然後將其左邊框移動到頁面的正中間（也就是left:50%含意）；最 後我們再從中間位置向左位移回一半的距離來，這樣就實現了水平置中了。
同樣，在設定水平置中前你需要設定一個固定的寬度。
究竟選擇哪個方法？
上面兩個方法究竟選擇哪種方法好呢？在第一種方法中貌似使用了Hack技術，其實並沒有，它是中規中矩的Web標準寫法，完全符合規範，因此， 兩個種方法中完全可以隨便的選取其中的任一種進行使用，他們不存在CSS hack的問題。

三、其它的置中方式
上面所說的都是設定了具體寬度的情況下水平置中的實現。有時候我們想做一個彈性布局，或者當一個元素處於一個容器中時我們只想讓它置中並不想設 定一個具體的寬度。其實這並不是真正的置中布局，就像對一個100%長度的元素來說，你說它是置中對齊還是居靠左對齊呢？所以所有不高寬度的置中都不是真正 的置中。這樣的設計我們是使用的像元素的padding來設定的，實際中我們是改變了父元素的容器大小：
如我們希望wrap元素長度隨視窗而改變，同時又維持置中，我們就可以這樣寫：
body {
padding:10px 150px;
}
body { padding:10px 150px;}
這裡，我們只需要保持父元素左右兩側的填充