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
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery