CSS布局与定位

居中布局

1

1、水平居中

2

       (a) inline-block + text-align:

a

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

     (b) table + margin:

b

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

      (c) absolute + transform:

c

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

c-2

(d) flex + justify-content:

d

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

2、垂直

v

    (a) table-cell + vertial-align:

a

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

    (b) absolute + transform:

b

      小结：存在css3兼容问题，定宽兼容性良好

     (c) flex + align-items:

c

      小结：高版本浏览器兼容，低版本不适用

3、水平垂直

hv

(a) inline-block + table-cell + text-align + vertical-align:

a

    小结：兼容至IE8

   (b) absolute + transform:

b

     小结：兼容性稍差，兼容IE10以上

   (c) flex:

c

多列布局

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

dl

(a) float + margin:

a

    小结：此方案对于定宽布局比较好，不定宽布局推荐方法

(b) float + overflow:

b

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

(c) table:

c

(d) flex:

d