CSS垂直居中精華總結

1  table-cell方式

將center元素的包含框display設定為table，center元素的display設定為table-cell，vertical-align設定為middle。

原理：利用表佈局特點，vertical-align設定為middle後，單元格中內容中間與所在行中間對齊

        .container2{

                display:table;

                height:100%;

            }

      .table_cell{/*將cell垂直居中，如果外層div不為table則tablecell必須有高度*/

                display:table-cell;

                vertical-align:middle;

            }

優點：支援任意內容的可變高度、支援響應式

缺點：每一個需要垂直居中的元素都會需要加上額外標籤（需要table、table-cell兩個額外元素,也可以不用新增多餘的無意義的標籤，修改display的block變成了table-cell，破壞了原有的塊狀元素的性質。

 

2  使用絕對定位垂直居中

 

絕對對位原理：元素在過度受限情況下，將margin設定為auto，瀏覽器會重算margin的值，過度受限指的是同時設定top/bottom與height或者left/right與width。

.absolute_center{

               /*display:none;*/

               position:absolute;

               width:200px;

               height:200px;

               top:0;

               bottom:0;

               left:0;

               right:0;

               margin:auto;

               background:#518fca;

               resize:both;/*用於設定了所有除overflow為visible的元素*/

               overflow:auto;

            }

使用絕對定位要求元素必須設定明確高度。內容超過元素高度時需要設定overflow決定滾動條的出現

優點：支援響應式，只有這種方法在resize之後仍然垂直居中

缺點：沒有顯式設定overflow時，內容超過元素高度時會溢位，沒有滾動條

 

3  負marginTop方式

　　已知元素高度後，使用絕對定位將top設定為50%，mergin-top設定為內容高度的一半(height + padding) / 2；內容超過元素高度時需要設定overflow決定滾動條的出現

原理：top：50%元素上邊界位於包含框中點，設定負外邊界使得元素垂直中心與包含框中心重合；

 

.negative_margin_top{

                position:absolute;

                top:50%;

                left:0;

                right:0;

                margin:auto;

                margin-top:-100px; /*-(height+padding)/2*/

                width:200px;

                height:200px;

            }    

優點：程式碼量少、瀏覽器相容性高支援ie6 ie7

缺點：不支援響應式(不能使用百分比、min/max-width)

 

4 利用translate

這是最簡單的方法，不近能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。內容塊定義transform: translate(-50%,-50%)必須帶上瀏覽器廠商的字首，還要加上top: 50%; left: 50%;

.is-Transformed {     

width: 50%;   

 margin: auto;   

 position: absolute;    

top: 50%; left: 50%;    

-webkit-transform: translate(-50%,-50%);       

 -ms-transform: translate(-50%,-50%);        

 transform: translate(-50%,-50%);  }  

優點：

1.內容可變高度   2.程式碼量少

缺點：

1.IE8不支援

2.屬性需要寫瀏覽器廠商字首

3.可能干擾其他transform效果

4.某些情形下會出現文字或元素邊界渲染模糊的現象

 

5  彈性盒式佈局

利用彈性盒式佈局，將字元素的主軸、側軸的排列方式都設定為居中對齊

原理：使用CSS彈性盒

.is-Flexbox {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center;

}

優點：真正的垂直居中佈局

缺點：ie11才開始支援彈性佈局