iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
9
Modern Web

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

使用 absolute + translate 達到CSS垂直置中的效果

簡言

此方式應該算是最方便的了,因為此置中的定位物件不需要固定的寬跟高,我們利用絕對定位時的 left 跟 top 設定物件的上方跟左方各都為 50% ,再利用 translate(-50%, -50%) 位移置中物件自身寬與高的 50% 就能達成置中的目的了。(CSS3 好棒棒!!)/images/emoticon/emoticon24.gif

原理說明

此方式也是眾多設計師會使用到的方式之一了,此方式與使用 margin 負值做垂直置中 是同樣的概念,但此垂直置中方式比起使用 margin 負值更棒的地方在於我們不用計算垂直置中物件的寬與高,我們使用 translate(-50%,-50%)的意思是,讓物件的X軸移動-50%,此50%是以物件本身的寬度作為100%來做計算,所以不管你的物件寬度是多少,他都會自動跑負一半的位置,可謂方便至極阿! 但各位要使用此方式做垂直置中的話,要稍微注意一下 translate 不是CSS 屬性而是 transform 屬性的「值」,所以請注意看下方原始碼中的寫法,不要直接傻傻的寫 translate 囉/images/emoticon/emoticon15.gif

原始碼

HTML

<div class="box box6">
  <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;
}
.box6 .content{
  width: 400px;
  background: #ccc;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

實際示範頁面

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


上一篇
使用 absolute + margin auto 來達到CSS垂直置中效果
下一篇
使用 Flex + align-items 做垂直置中
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言