在web標準中的頁面布局是使用div配合css來實現的。這其中最常用到的就是使整個頁面水平居中的效果，這是在頁面布局中基本，也是最應該首先掌握的知識。不過，還是經常會有人問到這個問題，在這裡我簡單總結一下使用div和css實現頁面水平居中的方法：
一、margin:auto 0 與 text-aligh:center
在現代瀏覽器（如internet explorer 7、firefox、opera等）現代瀏覽器實現水平居中的方法很簡單，只要設定到左右兩側的空白為自動即可。意即：
#wrap
上面這段**的意思是說使wrap這個div到左右兩側的距離自動設定，上下為0（可以為任意）。請在現代瀏覽器（如internet explorer 7、firefox、opera等）中執行現在的**：
在firefox等現代瀏覽器設定頁面元素的水平居中，只要指定margin:0 auto;即可
＜pre＞
div#wrap
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
上面的效果很好。但是這在internet explorer 6及改正的版本中是不起作用的，不過幸好它有自己的解決辦法。在internet explorer中text-align屬性是可繼承的，即在父元素中設定後在子元素中就預設具有了該屬性。因此我們可以在body標籤中設定text-align屬性值為center，這樣頁面內所有的元素都會自動居中，同時我們還要加乙個hook把頁面中的文字變成我們習慣的閱讀方式——居左對齊。因此我們要如此來寫**：
body
#wrap
這樣在internet explorer中我們就輕鬆實現了div的居中對齊。因此要在所有的瀏覽器中顯示居中的效果，我們就可以這樣寫我們的**：
＜title＞ css+div實現水平居中對齊的頁面布局 ＜/title＞
在firefox等現代瀏覽器設定頁面元素的水平居中，只要指定margin:0 auto;即可
＜pre＞
div#wrap
在internet explorer 6 及以下的版本中我們還要做以下的設定：
body
div#wrap
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
不過這裡有乙個前提，就是設定居中的元素要有固定的寬度，比如這裡我們設定了為760畫素。
二、相對定位與負的邊距
對於wrap進行相對定位，然後使用負的邊距抵消偏移量。這種方法比較簡單還很容易實現：
#wrap
這段**的意思是，設定wrap的定位是相對於其父元素body標籤的，然後將其左邊框移動到頁面的正中間（也就是left:50%含意）；最後我們再從中間位置向左偏移回一半的距離來，這樣就實現了水平居中了。
＜title＞ css+div實現水平居中對齊的頁面布局 ＜/title＞
在所有瀏覽器中都有效的方法：
＜pre＞
div#wrap
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
同樣，在設定水平居中前你需要設定乙個固定的寬度。
p.s.究竟選擇哪個方法？
上面兩個方法究竟選擇哪種方法好呢？在第一種方法中貌似使用了hack技術，其實並沒有，它是中規中矩的web標準寫法，完全符合規範，因此，兩個種方法中完全可以隨便的選取其中的任一種進行使用，他們不存在css hack的問題。
三、其它的居中方式
上面所說的都是設定了具體寬度的情況下水平居中的實現。有時候我們想做乙個彈性布局，或者當乙個元素處於乙個容器中時我們只想讓它居中並不想設定乙個具體的寬度。其實這並不是真正的居中布局，就像對乙個100%長度的元素來說，你說它是居中對齊還是居左對齊呢？所以所有不高寬度的居中都不是真正的居中。這樣的設計我們是使用的像元素的padding來設定的，實際中我們是改變了父元素的容器大小：
如我們希望wrap元素長度隨視窗而改變，同時又維持居中，我們就可以這樣寫：
body
這裡，我們只需要保持父元素左右兩側的填充是相等的就可以了。
＜title＞ 隨瀏覽器視窗大小而改變的具有彈性的居中布局 ＜/title＞
一種隨瀏覽器視窗大小而改變的具有彈性的居中布局：
＜pre＞
body
這裡，我們只需要保持父元素左右兩側的填充是相等的就可以了。
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
當然這只是「貌似居中」，不過卻常常很有用處。
DIV居中之div水平居中 讓DIV布局居中
div 居中之div水平居中 讓div布局居中篇 如何讓div居中呢？如何讓div盒子水平居中呢？本節divcss5讓大家實現div布局水平居中。在布局一張網頁時，通常網頁主體框架是居中於瀏覽器中的。實現最外層div水平居中與瀏覽器中需要乙個條件和乙個設定。假如最外層div盒子的css命名為 div...
CSS 布局 水平居中
一 水平居中 1 行內元素水平居中 父級元素設定text align center 實現在塊級元素內部的行內元素 inline inline block inline flex inline table 水平居中 dome 由此可見，塊級裡面的塊級元素水平居中也可以先把裡面的塊級設定成行內塊元素2 ...
CSS布局 水平垂直居中
題外話 這是乙個讓人抓狂的問題。html文件結構如下 實現效果 1.子元素已知寬高 給父容器設定相對定位 relative 子元素設定為絕對定位 absolute top left設定為50 margin top margin left分別設定為高寬的一半的負數。outer inner 2.子元素未...