原文:CSS垂直居中總結

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

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

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

　　

?　　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> 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后，單元格中內容中間與所在行中間對齊

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

?　　

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

<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才開始支持彈性布局

?

總結

以上是生活随笔為你收集整理的CSS垂直居中总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。