CSS垂直居中的技巧

大家知道CSS垂直居中嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

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

因為有固定高度，或許你想給 content 指定 overflow:auto，這樣如果 content 太多的話，就會出現滾動條，以免content 溢出。

Content goes here

#content {

position:absolute;

top:50%;

height:240px;

margin-top:-120px; /* negative half of the height */

}

優點：

適用於所有浏覽器

不需要嵌套標簽

缺點：

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

相信大家已經學會CSS垂直居中了吧!感謝大家對我們網站的支持!

相關推薦：

什麼是CSS的渲染效率呢