在web標準中的頁面布局是使用div配合css來實現的。這其中最常用到的就是使整個頁面水平居中的效果，這是在頁面布局中基本，也是最應該首先掌握的知識。不過，還是經常會有人問到這個問題，在這裡我簡單總結一下使用div和css實現頁面水平居中的方法：
在現代瀏覽器（如internet explorer 7、firefox、opera等）現代瀏覽器實現水平居中的方法很簡單，只要設定到左右兩側的空白為自動即可。意即：
#wrap
上面這段**的意思是說使wrap這個div到左右兩側的距離自動設定，上下為0（可以為任意）。請在現代瀏覽器（如internet explorer 7、firefox、opera等）中執行現在的**：
在firefox等現代瀏覽器設定頁面元素的水平居中，只要指定margin:0 auto;即可
div#wrap
上面的效果很好。但是這在internet explorer 6及改正的版本中是不起作用的，不過幸好它有自己的解決辦法。在internet explorer中text-align屬性是可繼承的，即在父元素中設定後在子元素中就預設具有了該屬性。因此我們可以在body標籤中設定text-align屬性值為center，這樣頁面內所有的元素都會自動居中，同時我們還要加乙個hook把頁面中的文字變成我們習慣的閱讀方式——居左對齊。因此我們要如此來寫**：
body
#wrap
這樣在internet explorer中我們就輕鬆實現了div的居中對齊。因此要在所有的瀏覽器中顯示居中的效果，我們就可以這樣寫我們的**：
body
#wrap
在firefox等現代瀏覽器設定頁面元素的水平居中，只要指定margin:0 auto;即可
div#wrap
在internet explorer 6 及以下的版本中我們還要做以下的設定：
body
div#wrap
不過這裡有乙個前提，就是設定居中的元素要有固定的寬度，比如這裡我們設定了為760畫素。
對於wrap進行相對定位，然後使用負的邊距抵消偏移量。這種方法比較簡單還很容易實現：
#wrap
這段**的意思是，設定wrap的定位是相對於其父元素body標籤的，然後將其左邊框移動到頁面的正中間（也就是left:50%含意）；最後我們再從中間位置向左偏移回一半的距離來，這樣就實現了水平居中了。
在所有瀏覽器中都有效的方法：
div#wrap
同樣，在設定水平居中前你需要設定乙個固定的寬度。
p.s.究竟選擇哪個方法？
上面兩個方法究竟選擇哪種方法好呢？在第一種方法中貌似使用了hack技術，其實並沒有，它是中規中矩的web標準寫法，完全符合規範，因此，兩個種方法中完全可以隨便的選取其中的任一種進行使用，他們不存在css hack的問題。
上面所說的都是設定了具體寬度的情況下水平居中的實現。有時候我們想做乙個彈性布局，或者當乙個元素處於乙個容器中時我們只想讓它居中並不想設定乙個具體的寬度。其實這並不是真正的居中布局，就像對乙個100%長度的元素來說，你說它是居中對齊還是居左對齊呢？所以所有不高寬度的居中都不是真正的居中。這樣的設計我們是使用的像元素的padding來設定的，實際中我們是改變了父元素的容器大小：
如我們希望wrap元素長度隨視窗而改變，同時又維持居中，我們就可以這樣寫：
body
這裡，我們只需要保持父元素左右兩側的填充是相等的就可以了。
一種隨瀏覽器視窗大小而改變的具有彈性的居中布局：
body
這裡，我們只需要保持父元素左右兩側的填充是相等的就可以了。
當然這只是「貌似居中」，不過卻常常很有用處。
CSS實現垂直居中的常用方法
這裡 在前端開發過程中，盒子居中是常常用到的。其中 居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設定元素的margin 0 auto就可以實現。但是垂直居中相對來說是比較複雜一些的。下面我們一起來討論一下實現垂直居中的方法。首先，定義乙個需要垂直居中的div元素，他的寬度和高度均為3...
CSS實現垂直居中的常用方法
css實現垂直居中的常用方法 在前端開發過程中，盒子居中是常常用到的。其中 居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設定元素的margin 0 auto就可以實現。但是垂直居中相對來說是比較複雜一些的。下面我們一起來討論一下實現垂直居中的方法。首先，定義乙個需要垂直居中的div元...
Css 居中的方法
css實現居中的方法 1.水平居中 text alian center 2.垂直居中 1 這個方法讓一些 顯示成table，然後我們就可以利用table的vertical align屬性了 vertical align作用在其他一些元素上會表現得非常不一樣 id cell class content...