你知道如何使CSS垂直居中嗎,這裡和大家分享一下CSS垂直居中的幾種方法以及它們各自的優缺點,相信本文介紹一定會讓你有所收獲。
CSS垂直居中的幾種方法
利用CSS來實現對象的垂直居中有許多不同的方法,比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎麼來創建一個好的居中網站。
使用CSS實現垂直居中並不容易。有些方法在一些浏覽器中無效。下面我們看一下使對象垂直集中的5種不同方法,以及它們各自的優缺點。
CSS垂直居中方法一:
這個方法把一些div的顯示方式設置為表格,因此我們可以使用表格的vertical-alignproperty屬性。
- <dividdivid="wrapper">
- <dividdivid="cell">
- <divclassdivclass="content">
- Contentgoeshere< span>div>
- < span>div>
- < span>div>
- #wrapper{display:table;}
- #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溢出。
- <divclassdivclass="content">
- Contentgoeshere< span>div>
- #content{
- position:absolute;
- top:50%;
- height:240px;
- margin-top:-120px;/*negativehalfoftheheight*/
- }
優點:
適用於所有浏覽器
不需要嵌套標簽
缺點:
沒有足夠空間時,content會消失(類似div在body內,當用戶縮小浏覽器窗口,滾動條不出現的情況)