方法一

這個方法把一些 div 的顯示方式設置為表格，因此我們可以使用表格的 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)點：
content 可以動態(tài)改變高度(不需在 CSS 中定義)。當 wrapper 里沒有足夠空間時， content 不會被截斷

缺點：
Internet Explorer(甚至 IE8 beta)中無效，許多嵌套標簽(其實沒那么糟糕，另一個專題)

方法二：

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

因為有固定高度，或許你想給 content 指定 overflow:auto，這樣如果 content 太多的話，就會出現滾動條，以免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)點：
適用于所有瀏覽器
不需要嵌套標簽

缺點：
沒有足夠空間時，content 會消失(類似div 在 body 內，當用戶縮小瀏覽器窗口，滾動條不出現的情況)

方法三?

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

<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)點：
適用于所有瀏覽器
沒有足夠空間時(例如：窗口縮小) content 不會被截斷，滾動條出現

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

例如：

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

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

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

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

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

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

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

轉載于:https://www.cnblogs.com/QingFlye/p/4119901.html

總結

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

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