网页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%，可以保证两款浏览器下均能够工作正常。