簡言

這個方式跟之前的一個方式很相似，但只是利用上下包夾的偽元素包夾我們的內容物件來達成垂直置中的目的。

原理說明

使用 Flex 的時候我們可以利用 flex-grow 來讓物件佔據剩下的父層空間，但假設內容物只有一個的話，這樣是無法達成垂直置中的，所以 Amos 利用了偽元素來填充父層上下的空間，僅需將 ::before & ::after 設定 flex-grow ，就能夠讓這兩個偽元素自動將父層剩下的空間完整的分好佔滿，之前 Amos 曾僅利用一個 ::before來達成垂直置中的原理跟這是一樣的，只是這次的做法更加的直覺，直接讓上下都填好填滿，觀念直接多了是不^^

原始碼

<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;display: flex;
  flex-direction: column;
  align-items: center;
}
.content{
  width: 400px;
  background: #ccc;
}
.box::before,
.box::after{
  content: '';
  flex-grow: 1;
}

實際示範頁面

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