簡言

這一招我想有點年紀的開者應該都有看過了，當然像我這麼嫩的開發者當然是第一次看到啦（這是什麼幹話），這一招的原理在於使用 CSS display 屬性將div設定成表格的儲存格(td)，這樣就能利用支援儲存格垂直對齊的 vertical-align: middle 屬性來將資料垂直置中啦。

原理說明

CSS 的 vertical-align 屬性一直都是很多設計師或工程師心中的痛，因為預設的 block 類型物件是不支援這屬性的，也因為如此所以很多人在製作網頁的垂直置中需求時都會有一種 WTF 的內心戲，明明字面上就是設定直向的位置，為什麼林北設定了沒用阿阿阿阿阿阿!!!!!(對不起我剛剛失控了)，那麼支援 vertical-align 屬性的物件類型有那些呢? 基本上有兩種，一種是儲存格(table-cell)物件，一種則是具備 inline 特性的物件，像是 inline 或是 inline-block 都是具備 inline 特性的屬性值，在這個例子中我們就是利用將物件設定成儲存格(table-cell)屬性，然後就能讓 div 標籤支援 vertical-align 屬性啦，原理就這麼簡單啦，下次我們看到網頁內的物件時，可以好好想想物件是什麼屬性喔，不要光是看表象了^^。

<div class="box">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！
  </div>
</div>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位