水平居中 垂直居中

一：水平居中之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