方法一

這個(gè)方法把一些 div 的顯示方式設(shè)置為表格，因此我們可以使用表格的 vertical-align property 屬性。

<div id="wrapper"><div id="cell"><div class="content">Content goes here</div></div> </div>

#wrapper { display:table; } #cell { display:table-cell; vertical-align:middle; }

優(yōu)點(diǎn)：
content 可以動(dòng)態(tài)改變高度(不需在 CSS 中定義)。當(dāng) wrapper 里沒(méi)有足夠空間時(shí)， content 不會(huì)被截?cái)?/p>

缺點(diǎn)：
Internet Explorer(甚至 IE8 beta)中無(wú)效，許多嵌套標(biāo)簽(其實(shí)沒(méi)那么糟糕，另一個(gè)專(zhuān)題)

方法二：

這個(gè)方法使用絕對(duì)定位的 div，把它的 top 設(shè)置為 50％，top margin 設(shè)置為負(fù)的 content 高度。這意味著對(duì)象必須在 CSS 中指定固定的高度。

因?yàn)橛泄潭ǜ叨?#xff0c;或許你想給 content 指定 overflow:auto，這樣如果 content 太多的話，就會(huì)出現(xiàn)滾動(dòng)條，以免content 溢出。

<div class="content">Content goes here</div>

#content {position:absolute;top:50%;height:240px;margin-top:-120px; /* negative half of the height */ }

優(yōu)點(diǎn)：
適用于所有瀏覽器
不需要嵌套標(biāo)簽

缺點(diǎn)：
沒(méi)有足夠空間時(shí)，content 會(huì)消失(類(lèi)似div 在 body 內(nèi)，當(dāng)用戶縮小瀏覽器窗口，滾動(dòng)條不出現(xiàn)的情況)

方法三?

這種方法，在 content 元素外插入一個(gè) div。設(shè)置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮動(dòng)，并顯示在中間。

<div id="floater"></div> <div id="content">Content here </div>

#floater { float:left ; height:50%; margin-bottom:-120px; } #content { clear:both ; height:240px ; position:relative ; }

優(yōu)點(diǎn)：
適用于所有瀏覽器
沒(méi)有足夠空間時(shí)(例如：窗口縮小) content 不會(huì)被截?cái)?#xff0c;滾動(dòng)條出現(xiàn)

缺點(diǎn)：
唯一我能想到的就是需要額外的空元素了(也沒(méi)那么糟，又是另外一個(gè)話題)

例如：

上邊的元素正好在50%–0.5*下邊元素的位置 ：這里為了便于說(shuō)明，我給#floater添加了背景和內(nèi)容； 如何不給#floater添加內(nèi)容，看到是這樣的： 為了便于看清楚： 我改變父級(jí)元素為box，如下：

四、單行內(nèi)容的居中
只考慮單行是最簡(jiǎn)單的，無(wú)論是否給容器固定高度，只要給容器設(shè)置?line-height?和?height，并使兩值相等，再加上?over-flow: hidden?就可以了

.middle {
height: 4em;
line-height: 4em;
overflow: hidden;
}

優(yōu)點(diǎn)：
1. 同時(shí)支持塊級(jí)和內(nèi)聯(lián)極元素
2. 支持所有瀏覽器
缺點(diǎn)：
1. 只能顯示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相對(duì)高度定義你的 height 和 line-height
2. 不想毀了你的布局的話，overflow: hidden 一定要

五、多行內(nèi)容居中，且容器高度可變
也很簡(jiǎn)單，給出一致的 padding-bottom 和 padding-top 就行

.middle {
padding-top: 24px;
padding-bottom: 24px;
}

優(yōu)點(diǎn)：
1. 同時(shí)支持塊級(jí)和內(nèi)聯(lián)極元素
2. 支持非文本內(nèi)容
3. 支持所有瀏覽器
缺點(diǎn)：
容器不能固定高度

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

總結(jié)

以上是生活随笔為你收集整理的垂直居中重要方法理解---重点是方法三的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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