Posted on by

CSS Vertical Align(用純CSS解決div垂直置中)

本文出處:http://blog.yam.com/hanasan/article/35806444

本次要介紹的是CSS垂直置中(Vertical Align with css)的完整解決整理。
說實話這並不太容易，雖然不像水平置中 {margin:0 auto;} 那樣單純, 但仍有幾種方式可以作到，以下共有五種方式一一介紹。

每種使用方式各有其優、缺點，端看自己要置中的內容是「區塊」或是「文字」來取捨。

方法一

使用CSS table-cell屬性來完成，什麼是table-cell？簡單說就是針對一些html object附于它table的屬性(詳見此)， 如果曾經使用過table來排版的網頁開發者，應該知道td的既有屬性valign，古早以前根本不會有垂直置中的問題，因為td下個 valign=”middle”就行了。 而table-cell即是可以將div模擬成表格(table)的儲存格(td)，讓原本不存在vertical-align的div可以使用。

Sample Code

HTML

<div id="wrap">
    <div id="cell">
        <div id="content">
            要被置中的內容
        </div>
    </div>
</div>

CSS

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

優點:

  1. 因為是CSS2.1釋出的標準屬性，正規的解決方法。
  2. 被置中的內容增加後，垂直置中的block會自動調整。

缺點:

  1. 支援性不佳，IE8以上才支援(IE7以下不支援display:table語法)
  2. 太多巢狀標籤(有種回到過去table排版的fu)

方法二

此方法適用在定義了絕對定位(absolute)的div, 將其top設置為50%, 再設置與div高度一半的「負」值margin-top，意謂著使用本方法必須固定div的高度。

Sample Code

HTML

<div id="center">
    要被置中的內容
</div>

CSS

#center {
    position:absolute; height:400px; top:50%; margin-top:-200px; /* div高度的一半 */
}

優點:

  1. 程式碼簡短，且無需為了「垂直置中」的目的多寫巢狀標籤
  2. 所有browser都支援，泛用性高

缺點:

  1. div高度需固定，若是動態資料有可能超過的話需要加上overflow:scroll讓溢出的內容可以看見

方法三

 

在需要被垂直置中的div前放置另一個div，設置為height:50%，margin-bottom:-contentHeight(目標高度的負值)

Sample Code

HTML

<body>
    <div id="floater"></div>
    <div id="middle">
        要被置中的div
    </div>
</body>

CSS

html, body {
    margin:0; padding:0; height:100%;
}
#floater { float:left; height:50%; margin-bottom:-200px;
    width:1px; /* only for IE7 */
}
#middle {  clear:both; height:400px; position:relative; }

優點:

  1. 所有browser都支援(Note:IE7必須在#floater追加width:1px才work!)
  2. 當內容增加時，垂直置中的div不會被切掉，而是會自動出現scroll-bar

缺點:

  1. 沒甚麼缺點，真要說就是一樣高度得固定。另外若置中物件的父層是body, 即使視窗被USER拖曳拉小了，div也一樣會唯持置中(笑)

方法四

本法使用在同樣是絕對定位(absolute)的div上，固定高度，並定義top:0; bottom:0; 和廣為被應用的
{ margin:0 auto; }作div水平置中原理類似

Sample Code

HTML

<div id="middle">
    我要被置中啦~
</div>

CSS

#middle {
    position:absolute; width:70%; height:280px;
    top:0; bottom:0; left:0; right:0; margin:auto;
}

優點:

  1. 簡單

缺點:

  1. 不支援IE7(含)以下
  2. 如果容器不夠裝內文, 也不會有scrollbar自動出現…

方法五

此方法適用於「單行」文字的垂直置中(EX:要作英文網站大Slogan時), container除了設置高度之外，同時也將行距(line-height)設置與高度相等。

Sample Code

HTML

<div id="content">
    一行文字要被置中啦
</div>

CSS

#content { font-size:32px; text-align:center; height:150px; line-height:150px; }

優點:

  1. 簡單
  2. 所有browser都支援(even IE6!)
  3. 即使內容溢出也不會被切掉

缺點:

  1. 只有單行文字適合
  2. 若div寬度固定，一當有長文字爆行時會很醜，務必小心使用。

以上列出五種使用純CSS(不加js)達成div vertical align(垂直置中)的藥方，可以綜合搭配使用，也可視情況單獨使用…