html高度自动居中,HTML页面布局 - 居中和高度自适应

对于HTML来说，页面布局与代码结构才是最重要的，传统的页面布局中比较典型的两个问题就是：居中和高度自适应(这里不考虑弹性布局)。

水平垂直居中问题

CSS中设置居中的属性有两个：align:center;vertical-align:middle，分别代表水平居中和垂直居中，然而这两个属性并不适用所有场景。align:center适用于标签内的文本内容，如果父元素中包含其他类似于div这种划分区域的标签，那么对于非IE元素就不起作用了，需要用到margin-left:auto;margin-right:auto属性来配合处理兼容。而vartical-align:middle却仅针对内链元素有用，对于块状元素，就没有办法了。

水平居中的问题比较好解决，如上面所述，直接设置text-align:center;margin:0 auto;即可实现。然而对于垂直居中就比较复杂了，可以分为几种情况：

父元素/子元素高度都固定；

父元素高度不固定，子元素高度固定；

父元素高度固定，子元素高度不固定；

父元素/子元素高度均不固定。

对于第一种情况比较简单，可以直接根据父子元素的高度的差值设置margin-top属性即可；

第二种情况则可以设置子元素相对或者绝对与父元素top:50%即可实现子元素的左上角居中，然后通过设置margin-top和margin-left为负自身高度的一半即可。

当看到第三种场景的时候，可能会想到利用line-height等于父元素的高度或者vertical-align:middle来实现垂直居中，但是可惜的是line-height仅是针对文字的，而