簡言

place-items 這屬性不知道有多少人用過，我們可利用這個屬性來快速設定 X 跟 Y 軸的對齊，達到垂直置中的效果。

原理說明

place-items 此屬性是 align-items 與 justify-items 的縮寫，簡單的說就是水平跟垂直的對齊方式，想當然的只要都設定為 center 就能做到水平置中跟垂直置中囉。原理超簡單的，如果不是很理解的話，可以看一下 Amos 的 CSS GRID / CSS格線好好玩 這段影片來了解 align-items 與 justify-items 的作用喔。

原始碼

HTML

<div class="box box16">
  <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: grid;
  height: 150px;
  margin: 0 auto;
  place-items: center;
}
.content{
  width: 400px;
  background: #ccc;
}

實際示範頁面

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