DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 實現CSS垂直居中的五大方法及優缺點(1)
實現CSS垂直居中的五大方法及優缺點(1)
編輯:CSS詳解     

你知道如何使CSS垂直居中嗎,這裡和大家分享一下CSS垂直居中的幾種方法以及它們各自的優缺點,相信本文介紹一定會讓你有所收獲。

CSS垂直居中的幾種方法

利用CSS來實現對象的垂直居中有許多不同的方法,比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎麼來創建一個好的居中網站。

使用CSS實現垂直居中並不容易。有些方法在一些浏覽器中無效。下面我們看一下使對象垂直集中的5種不同方法,以及它們各自的優缺點。

CSS垂直居中方法一:

這個方法把一些div的顯示方式設置為表格,因此我們可以使用表格的vertical-alignproperty屬性。

  1. <dividdivid="wrapper">
  2. <dividdivid="cell">
  3. <divclassdivclass="content">
  4. Contentgoesherediv>
  5. div>
  6. div>
  7. #wrapper{display:table;}
  8. #cell{display:table-cell;vertical-align:middle;}

優點:

content可以動態改變高度(不需在CSS中定義)。當wrapper裡沒有足夠空間時,content不會被截斷

缺點:

InternetExplorer(甚至IE8beta)中無效,許多嵌套標簽(其實沒那麼糟糕,另一個專題)

CSS垂直居中方法二:

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

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

  1. <divclassdivclass="content">
  2. Contentgoesherediv>
  3. #content{
  4. position:absolute;
  5. top:50%;
  6. height:240px;
  7. margin-top:-120px;/*negativehalfoftheheight*/
  8. }

優點:

適用於所有浏覽器

不需要嵌套標簽

缺點:

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved