1、水平居中

 

　　a） inline-block + text-align

 

　　提示：此方案兼容性较好，可兼容至IE8，对于IE567并不支持inline-block，需要使用css hack进行兼容

 

　　b） table + margin

 

　　提示：此方案兼容至IE8，可以使用<table/>代替css写法，兼容性良好

 

　　c） absolute + transform

 

　　提示：此方案兼容至IE9，因为transform兼容性限制，如果。child为定宽元素，可以使用以下写法，兼容性极佳

 

　　d） flex + justify-content

 

　　提示：flex是一个强大的css，生而为布局，它可以轻松的满足各种居中、对其、平分的布局要求，但由于现浏览器兼容性问题，此方案很少被使用，但是值得期待浏览器兼容性良好但那一天！

 

　　2、垂直

 

　　a） table-cell + vertial-align

 

　　提示：可替换成<table />布局，兼容性良好

 

　　b） absolute + transform

 

　　提示：存在css3兼容问题，定宽兼容性良好

 

　　c） flex + align-items

 

　　提示：高版本浏览器兼容，低版本不适用

 

　　3、水平垂直

 

　　a） inline-block + table-cell + text-align + vertical-align

 

　　提示：兼容至IE8

 

　　b） absolute + transform

 

　　提示：兼容性稍差，兼容IE10以上

 

　　c） flex

 

　　提示：兼容差

 

　　1、一列定宽，一列自适应

 

　　a） float + margin

 

　　提示：此方案对于定宽布局比较好，不定宽布局推荐方法b

 

　　b） float + overflow

 

　　提示：个人常用写法，此方案不管是多列定宽或是不定宽，都可以完美实现，同时可以实现登高布局

 

　　c） table

 

　　d） flex

 

　　2、多列定宽，一列自适应

 

　　a） float + overflow

 

　　b） table

 

　　c） flex

 

　　3、一列不定宽，一列自适应

 

　　a） float + overflow

 

　　b） table

 

　　c） flex

 

　　4、多列不定宽，一列自适应

 

　　a） float + overflow

 

　　5、等分

 

　　a） float + margin

 

　　b） table + margin

 

　　c） flex

 

　　6、等高

 

　　a） float + overflow

 

　　b） table

 

　　c） flex