工作中遇到垂直居中問題，特此總結了一下幾種方式與大家分享。本文討論的垂直居中僅支持IE8+
1、使用絕對定位垂直居中
<div class="container"> <!--<div class="floater"></div>--> <div class="center absolute_center"> 生活不能等待別人來安排，要自已去爭取和奮斗；<br> 而不論其結果是喜是悲，但可以慰藉的是，你總不枉在這世界上活了一場。<br> 有了這樣的認識，你就會珍重生活，而不會玩世不恭；同時，也會給人自身注入一種強大的內在力量。 </div> </div>
絕對對位原理：元素在過度受限情況下，將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的中心線與包含框中心線重合。
<div class="container"> <div class="floater"></div> <div class="center floater_center"> 人和社會，一切斗爭的總結局也許都是中庸而已。<br> 與其認真，不如隨便，采菊東籬下，悠然見南山。有錢就尋一醉，無錢就尋一睡，與過無爭，隨遇而安。 </div> </div>
.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后，單元格中內容中間與所在行中間對齊
<div class="container2"> <!--<div class="floater"></div>--> <div class="center table_cell"> 生命里有着多少的無奈和惋惜,又有着怎樣的愁苦和感傷?<br> 雨浸風蝕的落寞與蒼楚一定是水,靜靜地流過青春奮斗的日子和觸摸理想的歲月。 </div> </div>
.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元素會按照元素的垂直中心線對齊。
<div class="container"> <!--<div class="floater"></div>--> <div class="center inline_block"> 生命里有着多少的無奈和惋惜,又有着怎樣的愁苦和感傷?<br> 雨浸風蝕的落寞與蒼楚一定是水,靜靜地流過青春奮斗的日子和觸摸理想的歲月。 </div> </div>
.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彈性盒
<div class="container is-Flexbox"> <div class="center"> 既要腳踏實地於現實生活，又要不時跳出現實到理想的高台上張望一眼。<br> 在精神世界里建立起一套豐滿的體系，引領我們不迷失不懈怠。<br> 待我們一覺醒來，跌落在現實中的時候，可以毫無怨言地勇敢地承擔起生活重擔。<br> 這是孫少平教給我的道理。 <br> 只能永遠把艱辛的勞動看做生命的必要，即使沒有收獲的指望，也心平氣靜地繼續耕種。<br> 要做到這一點，路還好長。 </div> </div>
.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才開始支持彈性布局