CSS垂直居中總結

　　工做中遇到垂直居中問題，特此總結了一下幾種方式與你們分享。本文討論的垂直居中僅支持IE8+

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

                <div class="container">
            <!--<div class="floater"></div>-->
            <div class="center absolute_center">
                生活不能等待別人來安排，要自已去爭取和奮鬥；<br>
                而不論其結果是喜是悲，但能夠慰藉的是，你總不枉在這世界上活了一場。<br>
                有了這樣的認識，你就會珍重生活，而不會玩世不恭；同時，也會給人自身注入一種強大的內在力量。
            </div>
        </div>    

HTML結構

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

　　

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

 

 　　三、藉助額外元素floater

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

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

<div class="container">
            <div class="floater"></div>
            <div class="center floater_center">
                人和社會，一切鬥爭的總結局也許都是中庸而已。<br>
                與其認真，不如隨便，採菊東籬下，悠然見南山。有錢就尋一醉，無錢就尋一睡，與過無爭，隨遇而安。
            </div>
        </div>

View Code

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

 

人和社會，一切鬥爭的總結局也許都是中庸而已。
與其認真，不如隨便，採菊東籬下，悠然見南山。有錢就尋一醉，無錢就尋一睡，與過無爭，隨遇而安。　　

 　　優勢：瀏覽器兼容性好，支持舊版本ie

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

 

 　　四、table-cell方式

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

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

<div class="container2">
            <!--<div class="floater"></div>-->
            <div class="center table_cell">
                生命裏有着多少的無奈和可惜,又有着怎樣的愁苦和感傷?<br>
                雨浸風蝕的落寞與蒼楚必定是水,靜靜地流過青春奮鬥的日子和觸摸理想的歲月。
            </div>
        </div>

View Code

        .container2{
                display:table;
                height:100%;
            }
            .table_cell{/*將cell垂直居中，若是外層div不爲table則tablecell必須有高度*/
                display:table-cell;
                vertical-align:middle;
            }

生命裏有着多少的無奈和可惜,又有着怎樣的愁苦和感傷?
雨浸風蝕的落寞與蒼楚必定是水,靜靜地流過青春奮鬥的日子和觸摸理想的歲月。

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

　　缺點：每個須要垂直居中的元素都會須要加上額外標籤（須要table、table-cell兩個額外元素）

 　　

　　五、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元素會按照元素的垂直中心線對齊。

        <div class="container">
            <!--<div class="floater"></div>-->
            <div class="center inline_block">
                生命裏有着多少的無奈和可惜,又有着怎樣的愁苦和感傷?<br>
                雨浸風蝕的落寞與蒼楚必定是水,靜靜地流過青春奮鬥的日子和觸摸理想的歲月。
            </div>
        </div>

View Code

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

生命裏有着多少的無奈和可惜,又有着怎樣的愁苦和感傷?
雨浸風蝕的落寞與蒼楚必定是水,靜靜地流過青春奮鬥的日子和觸摸理想的歲月。

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

　　缺點：會加上額外標記

　　

　　六、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;
            }

其實咱們每一個人的生活都是一個世界，即便最平凡的人也要爲他生活的那個世界而奮鬥。

 　　優勢：簡單明瞭

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

 

　　七、彈性盒式佈局

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

　　原理：使用CSS彈性盒

        <div class="container is-Flexbox">
            <div class="center">
                既要腳踏實地於現實生活，又要不時跳出現實到理想的高臺上張望一眼。<br>
                在精神世界裏創建起一套豐滿的體系，引領咱們不迷失不懈怠。<br>
                待咱們一覺醒來，跌落在現實中的時候，能夠毫無怨言地勇敢地承擔起生活重擔。<br>
                這是孫少平教給個人道理。 <br>
                只能永遠把艱辛的勞動看作生命的必要，即便沒有收穫的期望，也心平氣靜地繼續耕種。<br>
                要作到這一點，路還好長。
            </div>
        </div>

View Code

.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纔開始支持彈性佈局