簡言

這是一個歷史最悠久的垂直置中方式了，支援度達到IE6+，這個方式基本上非常的符合垂直對齊的字面上意思，他是真的讓兩個物件之間做到垂直對齊。我們使用 :before 偽元素搭配 display: inline-block 屬性的寫法，並讓兩個 inline-block 物件做垂直對齊( vertical-align: middle )，這算是很傳統的垂直對齊技巧了，此方式的好處在於子層置中物件可以不需要特別設定高度，我們利用 100% 高的 :before偽元素以及不定高的內容區塊設定為 inline-block，就能對兩者使用 vertical-align: middle 來達到 :before 與 inline-block 內容物件垂直對齊的目的了，此方式在以往其實是個非常棒的垂直置中解決方案，唯獨需要特別處理掉 inline-block 物件之間的4至5px空間這個小缺點。

原理概念說明

此方式利用了 inline-block 中 inline 的特性來達成垂直置中，基本上 inline-block 同時擁有 inline 以及 block 兩種特性在內，除部分特性有所差異外，兩者的重點特性都保留了，像是 inline 的行排列特性以及 block 的區塊寬高範圍特性，這次的方法，Amos採用的就剛好是這兩個特性的結合。這個範例的重點項目說明如下

1. 首先在外層的 .box 上面產出一個 ::before 偽元素並將其設定為 inline-block
2. 利用 inline-block 可以設定高度的特性將偽元素設定高度為100%，讓他跟父層等高
3. 將 .content 設定為 inline-block，利用其 inline 特性準備讓他跟偽元素能夠併排在同一行
4. 如果 .content 會折行的話，基本是因為 .content 太寬的緣故，加上 inline-block 物件之間會有空白，所以我們需要後續的動作處理換行問題。
5. 由於是因為偽元素跟 .content 之間空白字元問題導致我的寬度計算無法精準掌控，所以 Amos 在 .box 設定 font-size: 0，讓空白字元的大小變成 0 就不占空間了，這樣縱使 .content 寬度 100% 也不會出現換行狀況了
6. 最後 Amos 將設定為 inline-block 的偽元素與 .content 同時設定 vertical-align:middle 就能讓畫面看起來垂直置中於 .box 了。但事實卻是 .content 只是與 ::before 做垂直對齊中間罷了。

原始碼

HTML

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

CSS

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
}
.box::before{
  content:'';
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}

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