iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
1
Modern Web

連續30天的超實務網頁設計的垂直置中教學系列 第 21

使用相對定位 Relative + translateY 來做垂直置中

簡言

這個技巧利用了 Top: 50% 的招式,讓你的物件上方能產生固定%數的距離,接著讓要置中的物件本身使用 tranlateY 的%數來達成垂直置中的需求,translate 是一個很棒的屬性,由於 translate 的百分比單位是利用物件自身的尺寸作為 100% ,這樣讓我們要利用物件自身寬高做事變得方便很多呢!

原理說明

相對定位對於垂直置中來說相對少見,此方式是將子物件利用top屬性設定50%,讓子物件的上方空出50%的父層高度後,接著使用 translateY(-50%)來讓物件向上移動50%自身高度,就能達成垂直置中的目的了,此做法跟絕對定位的垂直置中技巧可以說是同樣原理,此例中比較容易產生疑問的是子物件設定top:50%之後,此50%是誰的50%?是子物件自身的50%高度還是父層空間的50%高度?此外translateY(-50%)的部分也是一個重要觀念,所以只要這兩點有注意到且了解的話,基本上就沒啥問題囉,快樂的使用去吧。

<div class="box box21">
  <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;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}

實際示範頁面

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


上一篇
使用計算機 calc 來做到垂直置中效果
下一篇
使用 Padding 來做垂直置中啦
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言