網頁div內容居中顯示及高度自適應

居中顯示：

#a{
 margin:0px auto;
}

 

高度自適應：

html,body{
 margin:0px;
 height:100%;
}
#left{
 width:600px;
 height:100%;
 float:left;
}

 

      代碼非常簡單，對#left對象設置了height:100%,然而也能看出，同時設置了html與body的height:100%，這就是高度自適應問題的關鍵所在。一個對象的高度是否可以使用百分比顯示，取決於對象的父級對象。在頁面中，#left直接放置在body之中，因此它的父級對象是body，而在默認狀態下，瀏覽器並是沒有給body一個高度屬性，因此我們所設置的#left爲height:100%，並不會產生任何效果。但是，一旦我們給body設置了100%之後，它的子級對象#left的height:100%便發生作用了，這便是瀏覽器解析規則引發的高度自適應問題。
      代碼中除了給出body定義之外，還給html對象也應用了相同的樣式定義，這樣做的好處是，使IE與Firefox瀏覽器都能夠實現高度自適應，IE與Firefox對頁面對象的解析方式存在一定差異。在IE中，html對象默認爲100%的高度，body卻不是。而在Firefox中，html標籤就不是100%高度，因此我們給兩個標籤都定義爲height:100%，可以保證兩款瀏覽器下均能夠工作正常。