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佈局，這種佈局將是將來網站佈局的趨勢。若是有更好用的方法，歡迎你們補充。