一：水平居中之inline-block+text-align
-兼容性非常好
-inline+zoom:1 //兼容IE8以下
-child会继承text-align:center，需要对子元素进行reset
二:水平居中之table+margin
-table元素宽度为内容宽度
-只需要设置child ,IE6 7可以child可以采用table的方式如th tr来实现
三:水平居中之absolute+transform
-脱离文档流 不会对其他元素产生影响
-不兼容低版本IE
四:水平居中之flex+justify-content
-.child{
margin: 0 auto
}
-不兼容低版本IE
一:垂直居中之table-cell+vertical-align
-兼容到IE8以上
-兼容低版本HTML结构换成table结构
二:垂直居中之absolute+transform
-子元素不会干扰其他元素
三:垂直居中之flex+align-items
-不兼容低版本IE
一:居中(水平垂直居中)之inline-block+text-align+table-cell+vertical-align
-兼容性比较高
二:居中之absolute+transform
-child不会影响其他元素
-不兼容性低版本IE
三:居中之flex+justify-content+align-items
-只需要设置parent
-不兼容低版本IE