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

?

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

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

?HTML結(jié)構(gòu)

　　絕對對位原理：元素在過度受限情況下，將margin設(shè)置為auto，瀏覽器會重算margin的值，過度受限指的是同時設(shè)置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;/*用于設(shè)置了所有除overflow為visible的元素*/overflow:auto;} 生活不能等待別人來安排，要自已去爭取和奮斗；
而不論其結(jié)果是喜是悲，但可以慰藉的是，你總不枉在這世界上活了一場。
有了這樣的認(rèn)識，你就會珍重生活，而不會玩世不恭；同時，也會給人自身注入一種強(qiáng)大的內(nèi)在力量。

?　　使用絕對定位要求元素必須設(shè)置明確高度。內(nèi)容超過元素高度時需要設(shè)置overflow決定滾動條的出現(xiàn)

　　優(yōu)點(diǎn)：支持響應(yīng)式，只有這種方法在resize之后仍然垂直居中

　　缺點(diǎn)：沒有顯式設(shè)置overflow時，內(nèi)容超過元素高度時會溢出，沒有滾動條

　　

?　　2、負(fù)marginTop方式

　　已知元素高度后，使用絕對定位將top設(shè)置為50%，mergin-top設(shè)置為內(nèi)容高度的一半(height + padding) / 2；內(nèi)容超過元素高度時需要設(shè)置overflow決定滾動條的出現(xiàn)

　　原理：top：50%元素上邊界位于包含框中點(diǎn)，設(shè)置負(fù)外邊界使得元素垂直中心與包含框中心重合；

.negative_margin_top{position:absolute;top:50%;left:0;right:0;margin:auto;margin-top:-100px; /*-(height+padding)/2*/width:200px;height:200px;} 生命里有著多少的無奈和惋惜,又有著怎樣的愁苦和感傷?
雨浸風(fēng)蝕的落寞與蒼楚一定是水,靜靜地流過青春奮斗的日子和觸摸理想的歲月。

?　　優(yōu)點(diǎn)：代碼量少、瀏覽器兼容性高支持ie6 ie7

　　缺點(diǎn)：不支持響應(yīng)式(不能使用百分比、min/max-width)

?

?　　3、借助額外元素floater

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

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

?View Code .floater{height:50%;margin-bottom:-100px;}.floater_center{height:200px;width:200px;margin:auto;} 人和社會，一切斗爭的總結(jié)局也許都是中庸而已。
與其認(rèn)真，不如隨便，采菊東籬下，悠然見南山。有錢就尋一醉，無錢就尋一睡，與過無爭，隨遇而安。　　

?　　優(yōu)點(diǎn)：瀏覽器兼容性好，支持舊版本ie

　　缺點(diǎn)：需要額外元素，不支持響應(yīng)式

?

?　　4、table-cell方式

　　將center元素的包含框display設(shè)置為table，center元素的display設(shè)置為table-cell，vertical-align設(shè)置為middle。

　　原理：利用表布局特點(diǎn)，vertical-align設(shè)置為middle后，單元格中內(nèi)容中間與所在行中間對齊

?View Code .container2{display:table;height:100%;}.table_cell{/*將cell垂直居中，如果外層div不為table則tablecell必須有高度*/display:table-cell;vertical-align:middle;} 生命里有著多少的無奈和惋惜,又有著怎樣的愁苦和感傷?
雨浸風(fēng)蝕的落寞與蒼楚一定是水,靜靜地流過青春奮斗的日子和觸摸理想的歲月。

?　　優(yōu)點(diǎn)：支持任意內(nèi)容的可變高度、支持響應(yīng)式

　　缺點(diǎn)：每一個需要垂直居中的元素都會需要加上額外標(biāo)簽（需要table、table-cell兩個額外元素）

?　　

　　5、inline-block方式

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

　　原理：為同一行的inline-block元素設(shè)置vertical-align：middle，該行內(nèi)的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;} 生命里有著多少的無奈和惋惜,又有著怎樣的愁苦和感傷?
雨浸風(fēng)蝕的落寞與蒼楚一定是水,靜靜地流過青春奮斗的日子和觸摸理想的歲月。 ?

?　　優(yōu)點(diǎn)：支持響應(yīng)式、支持可變高度

　　缺點(diǎn)：會加上額外標(biāo)記

　　

　　6、line-height方式

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

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

<div class="single_line">其實我們每個人的生活都是一個世界，即使最平凡的人也要為他生活的那個世界而奮斗。</div> .single_line{height: 30px;font-size: 14px;line-height: 30px;border: 1px solid #518dca;} 其實我們每個人的生活都是一個世界，即使最平凡的人也要為他生活的那個世界而奮斗。

?　　優(yōu)點(diǎn)：簡單明了

　　缺點(diǎn)：只適用于單行文本，局限性大

?

　　7、彈性盒式布局

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

　　原理：使用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; } 既要腳踏實地于現(xiàn)實生活，又要不時跳出現(xiàn)實到理想的高臺上張望一眼。
在精神世界里建立起一套豐滿的體系，引領(lǐng)我們不迷失不懈怠。
待我們一覺醒來，跌落在現(xiàn)實中的時候，可以毫無怨言地勇敢地承擔(dān)起生活重?fù)?dān)。
這是孫少平教給我的道理。?
只能永遠(yuǎn)把艱辛的勞動看做生命的必要，即使沒有收獲的指望，也心平氣靜地繼續(xù)耕種。
要做到這一點(diǎn)，路還好長。

?　　優(yōu)點(diǎn)：真正的垂直居中布局

?　　缺點(diǎn)：ie11才開始支持彈性布局

轉(zhuǎn)載于:https://www.cnblogs.com/zjneter/p/5241868.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。