CSS经常使用垂直居中布局

        在前端岗位面试中，面试官为了考察前端攻城狮的css布局能力，很是喜欢问的其中一个问题就是如何让元素垂直居中，这种布局方法相信每一位同窗都有本身喜欢的一套方法，可是面试官要你回答得越多种方法越好，这时候可能就有点懵逼了。

        我收集了一下网上所说的各类垂直居中的奇技淫巧，筛选了一下，列出几种好理解又在平时工做中又好用的方法。

        1、绝对定位居中方法

            .absolute-center{

                    position:absolute;

                    margin:auto;

                    left:0;top:0;right:0;bottom:0;}

             

        

        

        特色：指定居中元素必须指定高度，兼容ie8+，支持图片居中，百分比属性值，自适应属性值。

        原理：1.标准流中，margin:auto等于margin-top:0;margin-bottom:0;

        2.top:0;right:0;bottom:0;left:0; 将给浏览器从新分配一个边界框，指定居中元素会填充body或相对定位父元素全部可用空间;

        3.给指定元素设置指定宽高，防止制定元素占据全部可用空间；margin:auto就让浏览器给该元素margin-top;margin-bottom相同的值。

        ps：绝对定位元素中的margin:auto 使其经过top:0;right:0;bottom:0;left:0;设置的边界内垂直居中。

        

        2、负外边距方法

               

    注意：margin-left与margin-right 的值必须是该居中元素的一半长度，不支持百分比长度；

        3、过渡方法

        

        原理与负外边距同样，区别是能够支持百分比长度

        4、table-cell表格单元格方法

                

        

        原理：表格table中的元素都是垂直居中展现

        5、Flexbox

        这是c3中新添加的伸缩布局，在pc端用的很少，由于只有ie10+才能支持这个属性，有些低端移动设备须要添加webkit前缀才能支持

            

        

        这五种方法中前四种是比较好理解也很好用的方法，最后一种若是是作移动端或者本身公司摒弃了低版本ie的同窗能够研究下c3中的flex布局，这种布局将是将来网站布局的趋势。若是有更好用的方法，欢迎你们补充。