CSS 垂直居中

1、使用絕對定位垂直居中

　　絕對對位原理：元素在過度受限情況下，將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時，內容超過元素高度時會溢出，沒有滾動條

 　　2、負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)

 　　3、藉助額外元素floater

 　　元素高度已知，在center元素外插入一個額外元素floater，設置floater的height為50%；margin-bottom為center元素高度的一半(height + padding) / 2。內容超過元素高度時需要設置overflow決定滾動條的出現。

　　原理與2方法類似，floater的下邊界是包含框的中心線，負下外邊界保證center的中心線與包含框中心線重合。

            .floater{
                height:50%;
                margin-bottom:-100px;
            }
            .floater_center{
                height:200px;
                width:200px;
                margin:auto;
            }

 　　優點：瀏覽器相容性好，支持舊版本ie

　　缺點：需要額外元素，不支持響應式

 　　4、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兩個額外元素）

　　5、inline-block方式

　　將center元素display設置為inline-block，vertical-align設置為middle，為包含框設置after偽元素，將偽元素display設置為inline-block,vercial-align設置為middle，同時設置height為100%，撐開容器。

　　原理：為同一行的inline-block元素設置vertical-align：middle，該行內的inline-block元素會按照元素的垂直中心線對齊。

        .container{
                display:block;
            }
            /*inline-block的前世今生*/
            .container:after{
                content: '';
                display: inline-block;
                vertical-align: middle;
                height: 100%;
            }
            .inline_block{
                display:inline-block;
                vertical-align:middle;
            }

 　　優點：支持響應式、支持可變高度

　　缺點：會加上額外標記

　　6、line-height方式

　　該方式只適用於情況比較簡單的單行文本，將line-height設置與元素高度同高。

　　原理：如果line-height高度大於font-size，生於高度瀏覽器會平分到文字上下兩端。

            <div class="single_line">
                其實我們每個人的生活都是一個世界，即使最平凡的人也要為他生活的那個世界而奮鬥。
            </div>

            .single_line{
                  height: 30px;
                  font-size: 14px;
                  line-height: 30px;
                  border: 1px solid #518dca;
            }

 　　優點：簡單明瞭

　　缺點：只適用於單行文本，局限性大

　　7、彈性盒式佈局

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

　　原理：使用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;
}