用 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/