元素的水平居中和垂直居中

水平居中设置：
行内元素水平居中通过给父元素设置text-align:center;来实现。
块状元素分为定宽块状元素（块状元素的宽度width为固定值）和不定宽块状元素
定宽块状元素可以通过设置margin:auto;来实现居中。
不定宽块状元素的三种居中方法：
1.加入teble标签，利用table标签的长度自适应---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽块元素，然后利用定宽块元素居中的margin的方法，使其水平居中。
2.改变块级元素的display为inline类型（设置为行内元素显示），然后使用text-align:center来实现居中效果。
3.通过给父元素设置float，然后给父元素设置position：relative和left：50%，子元素设置position：relative和left：-50%来实现水平居中。
垂直居中设置：
父元素高度确定的单行文本的垂直居中方法是：设置父元素的height和line-height高度一致来实现的。
父元素高度确定的多行文本垂直居中：
1.使用插入table（包括tbody、tr、td）标签，同时设置vertical-align：middle
2.在chrome、Firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性，但是注意IE6/7并不支持这个样式，兼容性差。