用css 讓區塊水平垂直置中 | css margin置中
有時候我們需要做個前導頁或是簡單的名片形象頁,在內容不多的情況下,可能需要讓DIV垂直以及水平置中;除了DIV外,甚至連文字也需要垂直與水平置中。就如同下圖範例,這是一個很簡單的名片形象頁,深灰色底是一個DIV。可以看到除了DIV之外,文字也是垂直水平置中。另外當你移動畫面時,他也會固定在畫面中央,不會因為視窗縮放而有任何跑版情況。(線上DEMO網址:http://codepen.io/mukiwu/full/Iuncz/[1])看起來很難的效果,其實只要短短幾行語法就能達成。就讓我們一步一步的拆解吧🙂DIV垂直水平置中先跟大家分享一張非常清楚的圖...
有時候我們需要做個前導頁或是簡單的名片形象頁,在內容不多的情況下,可能需要讓 DIV 垂直以及水平置中;除了 DIV 外,甚至連文字也需要垂直與水平置中。
就如同下圖範例,這是一個很簡單的名片形象頁,深灰色底是一個 DIV。可以看到除了 DIV 之外,文字也是垂直水平置中。
另外當你移動畫面時,他也會固定在畫面中央,不會因為視窗縮放而有任何跑版情況。(線上 DEMO 網址:http://codepen.io/mukiwu/full/Iuncz/[1])
看起來很難的效果,其實只要短短幾行語法就能達成。就讓我們一步一步的拆解吧 🙂
DIV 垂直水平置中先跟大家分享一張非常清楚的圖解,取自 Smashing Magazine 的大作。(圖片來源:smashingmagazine[2])
如圖所示,不管該元素(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 就可以囉!算是置中規則...