簡言

align-self 應該大家都不陌生，基本上就是對 flex 次軸(cross axis)的個別對齊方式，只要對單一子層物件設定 align-self: center 就能達成垂直置中的目的了。

原理說明

之前有提到 Flex 次軸的對齊方式是使用 align-items，但倘若指是針對單一物件做次軸對齊的話，我們可以利用 align-self 來直接對子層物件做設定，這樣的方式更加的直覺，然後...就沒有然後了，就這麼簡單。(這好像是目前原理說明最少的一篇了)

原始碼

HTML

<div class="box box10">
  <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;
  display: flex;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center
}

實際示範頁面

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