用 css 讓區塊水平垂直置中

【舊文更新】
2014.06.24 更新程式碼以及範例線上 DEMO。
此外之前放圖片的空間在未告知的情況下撤走,所以圖片來不及備份,因此重新做了範例新圖。

有時候我們需要做個前導頁或是簡單的名片形象頁,在內容不多的情況下,可能需要讓 DIV 垂直以及水平置中;除了 DIV 外,甚至連文字也需要垂直與水平置中。

就如同下圖範例,這是一個很簡單的名片形象頁,深灰色底是一個 DIV。可以看到除了 DIV 之外,文字也是垂直水平置中。

另外當你移動畫面時,他也會固定在畫面中央,不會因為視窗縮放而有任何跑版情況。(線上 DEMO 網址:http://codepen.io/mukiwu/full/Iuncz/

看起來很難的效果,其實只要短短幾行語法就能達成。就讓我們一步一步的拆解吧 🙂


DIV 垂直水平置中

先跟大家分享一張非常清楚的圖解,取自 Smashing Magazine 的大作。

(圖片來源:smashingmagazine

如圖所示,不管該元素(DIV)多大,我們都可以先用position: absolute 讓元素放在中央。

position: absolute;
top: 50%;
left: 50%;

但事情可沒那麼簡單,利用absolute調整位子的基準,是從該元素的「左上角」開始算起。所以如果在 X 以及 Y 軸各設 50%,是針對元素左上角(紅色點)的 50%
▼ 因此該元素(DIV)位子會掉到淺灰色區塊的地方,但是紅點剛好在畫面正中央。

我們必須要再給予元素明確的高與寬,利用margin-top以及margin-left把元素往回推。往回推的數值就是(高/2)以及(寬/2)。如果高是300px,就往回推150px,依此類推。

最後垂直置中的程式碼會如下所示:

div {
  width: 600px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -300px;
}

文字垂直水平置中

想讓文字水平置中,只要寫text-align:center就可以囉!算是置中規則裡最簡單的一種。
而垂直置中卻沒那麼直覺,單純寫上vertical-align:middle,瀏覽器是不會鳥你的。

垂直置中有很多種解法,今天跟大家分享其中一種,透過display改變元素的形態,進而讓垂直置中有用。

HTML 必須要有一組二層的巢狀結構:

<section>
    <div class="center">
        文字垂直置中
    </div>
</section>

利用 CSS 修改display

section {
    display: table;
}

.center {
    display: table-cell;
    vertical-align: middle;
}

使用這種方法就可以讓文字垂直置中囉 ~。

延伸閱讀:In the Woods 有提供更多種垂直置中的解法,好處與壞處也寫得很詳細,可以參考看看。

最後你也可以將兩種垂直置中的效果合併在一起,完整的程式碼請參考我的 DEMO:http://codepen.io/mukiwu/full/Iuncz/

<section>
  <div class="text-center">
    <h2>Vertical & Horizontal center for div and text</h2>
    <div class="data-wrap">
      <img src="http://i.imgur.com/9jHBhWys.jpg" border="0" />
      <h3>Muki Wu</h3>
      <div class="title">Front-end Designer (Taipei, Taiwan)</div>
      <p>description or some social icons....</p>
    </div>
  </div>
</section>
/**
Vertical & Horizontal center for div and text
Autohr: Muki Wu
Article: http://muki.tw/tech//css-div-center
**/

/* center settings start */
section {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -250px;
  display: table;
}
section .text-center {
  display: table-cell;
  vertical-align: middle;
}
h2 {
  text-align: center;
}

有任何問題都歡迎提出來喲。下面的是 2010 年寫的舊文章,就僅供大家參考了 🙂

以下為舊文,僅供參考。

有時候我們想要做個簡單的首頁(有人稱前導頁、形象頁…等),或是購物車平台要做圖片展示,會運用到水平+垂直置中的技巧。以前都是直接用text-align:center以及vertical-align:middle兩行解決。

但使用這個語法,有時成功、有時又會失效,在不太清楚原因的情況下,我改用了其他方法實現我想要的區塊水平垂直置中,在這邊也整理出來分享給大家,希望對你們有所幫助:)

首先先看範例:

首頁、前導頁、形象頁,區塊水平垂直置中

這是以前部落格的首頁,眼尖的朋友會發現我的垂直區塊並沒有完全置中,因為這部分是可以作微調的,以下會做說明。
我使用的css語法設定如下:

#div {
  width: 450px;/*必須要設定你整個DIV區塊的寬度*/
  position: absolute;
  margin: -100px 0px 0px -200px;/*調整水平垂直置中*/
  top: 50%;
  left: 50%;
  overflow: auto;
}

如果你想來點特別的,不想要那麼剛好在正中央,可以對margin:-100px 0px 0px -200px;進行微調。像我的首頁是寫成margin:-200px 0px 0px -200px;,所以才沒有剛好在垂直中線上。

參考資料:
該語法來源自mycelly.com的 Nice and Free CSS Templates,他網站還有更多各式各樣的佈局參考,包含二欄、三欄,甚至是特殊欄位的樣板。找到你想要的樣板點下去就可以看到他的 css+xhtml 原始碼囉。

購物車圖片水平垂直置中

如果是想要讓每張圖片都水平垂直置中,像是購物車,或是相簿的圖片展示,可以參考以下 css 語法:

#img {
  float: left;
  /*以下是寬&amp;高不是圖片的寬&amp;高,而是包覆圖片的DIV的寬&amp;高*/
  width: 240px;
  height: 155px;
  border:  1px solid #d0d0d0;
  text-align: center;
  line-height: 155px;/*line-height設定是重點,建議可以設成跟height一樣*/

  /* IE */
  /* 專為 IE7 調整,140px=155px*0.8 */
  *font-size : 140px;
  *font-family: Arial;
}

應用在xhtml裡頭可以寫成<div id="img"><img src="圖片位置" border="0" /></div>

參考資料:
該語法來源自Vexed’s Blog,這設定方法應該是原作者自己想出來的,裡頭也有詳細解釋到為什麼 IE 要 *0.8 做設定,還有更多細部的修正與微調。

大家可以發現原作者提供的語法較長,我的短很多。雖然短,我提供的語法卻同樣適用於 Firefox、Google Chrome、Opera、Safari、IE6、IE7、IE8…等瀏覽器,那是因為我的 xhtml 有做 DOCTYPE 的 Strict 宣告,如果你們不希望語法那麼長,也可以考慮做個 DOCTYPE 宣告喔。

至於如果宣告 DOCTYPE 呢?只要在你的 html 檔案最上方加入這段語法就可以了!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • Zeng BravoMan

    花了不少時間寫文章分享吧?感謝。

    • 感謝,有人喜歡與閱讀就很開心了 >_<

  • 賴痞業

    謝謝妳的分享,很實用!!

  • Ken Huang

    好厲害 拜讀~