簡言

誰說絕對定位(position: absolute)要少用的？Amos 認為沒有少用多用的問題，重點在於你是否有「妥善運用」才是重點，絕對定位在這個例子中會設定 top: 50% 來抓取空間高度的 50%，接著再將要置中物件的 marign-top 設定為自身負一半的高度，這樣就能讓物件置中啦，此方法可是自古以來流傳了多年的置中方式呢！

垂直置中原理

這個垂直置中的方式也是網頁設計中常見的作法之一，歷史悠久的這個做法，我們利用top:50% 以及 left:50% 來將網頁物件定位在距離空間左側 50% 以及空間頂端 50% 的位置，這時物件的左上角端點是位於空間的正中間的。
接者我們使用 margin-top 屬性，將數值設定成物件自身一半的高度(採用負值)，這樣物件的中間位置就會剛好是空間的垂直中間囉，同理!物件的水平軸置中也是一樣的做法，這方法應該很簡單就能理解囉。
Amos 本身其實蠻常利用此原理去達成一些版面的編排的，這樣的技巧可以讓我們不再以邊緣作為定位方式，甚至可以利用頁面的正中間來做定位，未來有機會 Amos 再安排直播來分享這樣的定位方式囉。各位也可以嘗試著自己思考看看怎麼應用這樣的原理來作一些畫面的排版應用。

原始碼

HTML

<div class="box box4">
  <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;
  position: relative;
}
.box4 .content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
本文同步發表於CSS可樂 『CSS垂直置中技巧，我只會23個，你會幾個？ 』
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位