HTML/CSS

2014.06.24

用 css 讓區塊水平垂直置中


有時候我們需要做個前導頁或是簡單的名片形象頁,在內容不多的情況下,可能需要讓 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/

(更新) 使用 flex 水平垂直置中

提到水平垂直置中,大家現在的心頭好絕對是 display:flex 啊!寫法上也變得簡單許多,讓我們來看看如何把上面的資料改用 flex 重寫吧。

▼ 先把樣式建好,在沒有調整位置前,預設會在畫面左上角。

▼ HTML 結構簡化如下:

<div class="main">
  <div class="block">
    <header>
      上方的紅底區塊
    </header>
    <div class="data-wrap">
      頭像 + 文字介紹
    </div>
  </div>
</div>

▼ 來加上 display:flex

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
  • justify-content: center;:讓 .main 區塊水平置中
  • align-items: center;:讓 .main 區塊垂直置中
  • height: 100vh;:把 .main 的高度設為與瀏覽器視窗同高,如果沒設定這一行,垂直置中不會有作用。

▼ 簡單四行就可以完成水平垂直置中

▼ 我們也可以用 display:flex 完成 .data-wrap 的排版

<div class="data-wrap">
  <img src="https://i.imgur.com/9jHBhWys.jpg" border="0" />
  <div class="data-content">
    <h3>Muki Wu</h3>
    <div class="title">Front-end Designer (Taipei, Taiwan)</div>
    <p>description or some social icons....</p>
  </div>
</div>
.data-wrap {
  display: flex;
}

.data-content {
  margin-left: 1.5rem;
}

.data-wrap 設定 display:flex,就能實現左右排版,輕鬆省下使用 float 後還要清除浮動… 等問題。

延伸閱讀

有興趣想更了解 flex 或是 vertical-align 等對齊效果的朋友,歡迎參考我的其他文章:

CSS Flexbox 介紹與解析

老實說我到現在都還沒開始用 flex 做網站,最大的原因就是 IE 相容問題,不過這也不能當作不學習的原因,畢 […]

Read more

難解的 CSS 排版:認識對齊(上)

我一直很想寫這系列的文章,一來是 CSS 博大精深,有太多難解的觀念在裡頭。二來是常常要切很多重複卻又複雜的版 […]

Read more

難解的 CSS 排版:認識對齊(下)

本文為參加第 11 屆「iT 邦幫忙鐵人賽」系列文章,會優先在部落格發文,再貼到 iT 邦幫忙。如果文章對您有 […]

Read more


更多 CSS 相關文章

guest
5 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Zeng BravoMan
Zeng BravoMan
7 years ago

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

muki
7 years ago
Reply to  Zeng BravoMan

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

賴痞業
賴痞業
6 years ago

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

Ken Huang
Ken Huang
5 years ago

好厲害 拜讀~

Carl Lu
Carl Lu
5 years ago

嗨~我最近剛開始學前端, 謝謝妳這篇文章, 幫了我很大的忙!

Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.