css布局解决方案

总结css布局

一、居中布局

    1、水平布局

        1）display:inline-block;text-algin:center;

            a、原理、用法

                原理：先将子框由块级元素变为行内元素，再通过设置行内元素居中以到水平居中；

                用法：对子框设置display:inline-block,对父元素设置text-algin:center；

            b、代码实例

                

            c、优缺点

                优点：兼容性好，可兼容IE6、IE7

                缺点：child中的文字也会居中，可通过设置child的text-algin:left还原；

        2）tabel+margin

            a、原理、用法

                原理：将子元素设置为块级表格来显示，在设置子框居中以达到水平居中

                用法：对子框设置display:table;margin:0 auto;

            b、代码实例

                

            c、优缺点

                优点：只设置了child，IE8以上都支持

                缺点：不支持ie6、ie7

        3）使用absolute+transform

            a、原理与用法

                原理：将子框设置为相对于父元素绝对定位，在移动子框，使子框左侧距离相对于框左侧边框的距离为相对框宽度的一半，在通过像左移动子框宽度的一半以达到水平居中；

                方法：父元素设置position:relative;子元素设置position:absolute;left:50%;transform:translateX(-50%);

            b、代码实例

                

            c、优缺点

                优点：居中元素不会对其他产生影响；

                缺点：transform是css3的内容，会存在一些兼容性的问题，高版本浏览器需要加前缀；

        4）使用flex和margin

            a、原理、用法

                原理：通过css3的布局神器flex将子框转换为flex item，在设置子框居中以达到水平居中

                用法：先将父元素display:flex对子框设置margin:0 auto;

            b、代码实例

                

            c、优缺点

                缺点：IE6、IE7、IE8不支持

        5）使用flex+justify-content

            a、原理及方法

                原理：通过CSS3中的布局利器flex中的justify-content属性来达到水平居中；

                 方法：先将父框设置为display:flex，再设置justify-content:center。

            b、代码实例

                

            c、优缺点

                优点：只需要设置父元素

                缺点：IE6、IE7、IE8不支持