關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 342831

    累積人氣

  • 128

    今日人氣

    3

    追蹤人氣

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

在需要被垂直置中的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自動出現...

方法五

此方法適用於「單行」文字的垂直置中(e.g. 要作英文網站大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(垂直置中)的藥方,可以綜合搭配使用,也可視情況單獨使用...

Caution!
文本撰寫時間為 2011 年 3 月,用法雖仍可使用,但觀念略嫌老舊。有興趣研究者可再參考新文 更多 CSS 達成 Div 垂直置中的方法研究 (CSS Vertical Centering Complete Guide)

延伸閱讀

相簿設定
標籤設定
相簿狀態