用 css 讓區塊水平垂直置中

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

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

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

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


DIV 垂直水平置中

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

(圖片來源:smashingmagazine

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

CSS

但事情可沒那麼簡單,利用absolute調整位子的基準,是從該元素的「左上角」開始算起。所以如果在 X 以及 Y 軸各設 50%,是針對元素左上角(紅色點)的 50%


▼ 因此該元素(DIV)位子會掉到淺灰色區塊的地方,但是紅點剛好在畫面正中央。

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

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

CSS

文字垂直水平置中

想讓文字水平置中,只要寫text-align:center就可以囉!算是置中規則裡最簡單的一種。

而垂直置中卻沒那麼直覺,單純寫上vertical-align:middle,瀏覽器是不會鳥你的。

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

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

HTML

利用 CSS 修改display

CSS

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

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

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

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

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

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

muki
5 years ago
Reply to  Zeng BravoMan

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

賴痞業
賴痞業
5 years ago

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

Ken Huang
Ken Huang
3 years ago

好厲害 拜讀~

Carl Lu
Carl Lu
3 years ago

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

粉絲團