一.水平居中
1.display:inline-block;
这个方法是把容器先转为行内块级，然后用text-align:center；来让内容相对于其父元素水平居中。
2.margin：0 auto；
这个方法是针对块级元素的。
3.父级元素设置position：relative；子元素position：absolute；
子元素设置top：50%；height：20px；margin-top：-10px；
二.垂直居中
1.vertical-align
适用于内联元素（以及被转化为内联元素的块元素），或者display设置为table-cell的元素，在 firefox 和 ie8 下，可以设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性，显示效果和就和表格中的 valign="center" 一样了。但 ie6,7 并不支持。
2.height加line-height
针对块级元素内的内容垂直居中，设置height=line-height的高度可以达到目的。
3.等同于水平居中的第三个方法。
三.table
设置父元素的display为table，设置子元素的display为table-cell。子元素再加上vertical-align:middle;text-align:center;。
