轉載：CSS垂直居中總結

戲水發表於2016-03-04
CSS

原文地址：http://www.cnblogs.com/dojo-lzz/p/4419596.html

 

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

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

 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時，內容超過元素高度時會溢位，沒有滾動條

　　

 　　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的中心線與包含框中心線重合。

 View Code
複製程式碼
            .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後，單元格中內容中間與所在行中間對齊

 View Code
複製程式碼
        .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元素會按照元素的垂直中心線對齊。

 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;
            }
複製程式碼
生命裡有著多少的無奈和惋惜,又有著怎樣的愁苦和感傷?
雨浸風蝕的落寞與蒼楚一定是水,靜靜地流過青春奮鬥的日子和觸控理想的歲月。
 

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

　　缺點：會加上額外標記

　　

　　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彈性盒

 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才開始支援彈性佈局

相關文章