原文:CSS垂直居中總結(jié)

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

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

<div class="container"><!--<div class="floater"></div>--><div class="center absolute_center">生活不能等待別人來安排，要自已去爭取和奮斗；<br>而不論其結(jié)果是喜是悲，但可以慰藉的是，你總不枉在這世界上活了一場。<br>有了這樣的認(rèn)識，你就會(huì)珍重生活，而不會(huì)玩世不恭；同時(shí)，也會(huì)給人自身注入一種強(qiáng)大的內(nèi)在力量。</div></div> HTML結(jié)構(gòu)

　　絕對對位原理：元素在過度受限情況下，將margin設(shè)置為auto，瀏覽器會(huì)重算margin的值，過度受限指的是同時(shí)設(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)識，你就會(huì)珍重生活，而不會(huì)玩世不恭；同時(shí)，也會(huì)給人自身注入一種強(qiáng)大的內(nèi)在力量。

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

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

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

　　

?　　2、負(fù)marginTop方式

　　已知元素高度后，使用絕對定位將top設(shè)置為50%，mergin-top設(shè)置為內(nèi)容高度的一半(height + padding) / 2；內(nèi)容超過元素高度時(shí)需要設(shè)置overflow決定滾動(dòng)條的出現(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元素外插入一個(gè)額外元素floater，設(shè)置floater的height為50%；margin-bottom為center元素高度的一半(height + padding) / 2。內(nèi)容超過元素高度時(shí)需要設(shè)置overflow決定滾動(dòng)條的出現(xiàn)。

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

<div class="container"><div class="floater"></div><div class="center floater_center">人和社會(huì)，一切斗爭的總結(jié)局也許都是中庸而已。<br>與其認(rèn)真，不如隨便，采菊東籬下，悠然見南山。有錢就尋一醉，無錢就尋一睡，與過無爭，隨遇而安。</div></div> View Code .floater{height:50%;margin-bottom:-100px;}.floater_center{height:200px;width:200px;margin:auto;} 人和社會(huì)，一切斗爭的總結(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)容中間與所在行中間對齊

<div class="container2"><!--<div class="floater"></div>--><div class="center table_cell">生命里有著多少的無奈和惋惜,又有著怎樣的愁苦和感傷?<br>雨浸風(fēng)蝕的落寞與蒼楚一定是水,靜靜地流過青春奮斗的日子和觸摸理想的歲月。</div></div> 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)：每一個(gè)需要垂直居中的元素都會(huì)需要加上額外標(biāo)簽（需要table、table-cell兩個(gè)額外元素）

?　　

　　5、inline-block方式

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

　　原理：為同一行的inline-block元素設(shè)置vertical-align：middle，該行內(nèi)的inline-block元素會(huì)按照元素的垂直中心線對齊。

<div class="container"><!--<div class="floater"></div>--><div class="center inline_block">生命里有著多少的無奈和惋惜,又有著怎樣的愁苦和感傷?<br>雨浸風(fēng)蝕的落寞與蒼楚一定是水,靜靜地流過青春奮斗的日子和觸摸理想的歲月。</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;} 生命里有著多少的無奈和惋惜,又有著怎樣的愁苦和感傷?
雨浸風(fēng)蝕的落寞與蒼楚一定是水,靜靜地流過青春奮斗的日子和觸摸理想的歲月。

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

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

　　

　　6、line-height方式

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

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

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

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

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

?

　　7、彈性盒式布局

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

　　原理：使用CSS彈性盒

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

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

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

?

總結(jié)

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

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