iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
1
Modern Web

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

使用 absolute + margin auto 來達到CSS垂直置中效果

簡言

絕對定位的垂直置中又一個,這個方式比較特別一點,當物件設定絕對定位之後,預設它是抓不到整體可運用空間的範圍,所以 margin: auto 此時會失效,但當你設定了 top: 0; bottom: 0 時,絕對定位物件就抓到可運用的空間了,這時你的 margin: auto 就生效了(神奇吧),如果你的絕對定位物件需要水平置中於父層,那你同樣可以設定 left: 0; right: 0; 來讓絕對定位物件取得空間可運用範圍,再讓 margin-left 與 margin-right 設定為 auto 即可置中。但此方式的缺點是你的定位物件必須有固定的寬高(%數也可)才能正常置中。

原理說明

這個垂直置中的方式也是網頁設計中常見的作法之一,歷史悠久的這個做法,人們最容易產生疑問的地方在於 margin 的使用時機,基本上當你將網頁物件設定為 absolute 時,若沒有搭配 left/right/top/bottom 這類屬性的話,它的 margin 計算是有問題的,所以我們在這個例子中,需要使用 absolute 搭配 top & bottom 來讓 margin:auto 能正常計算出來,若是要用比較淺白的解釋的話,Amos 會這麼解釋:
『當你將物件設定成絕對定位後,此時你的物件將自己位於一個層,此時尚未知道這一層的空間大小多少,但是一旦將物件設定top:0 以及 bottom:0 時,此時瀏覽器將會計算空間頂端跟底端的空間尺寸,這時你的空間大小就能夠被取得了,接著我們的 margin:auto 就生效囉。』
這個原理我們其實也同樣可以運用在 position:fixed 定位屬性上,像是蓋板廣告(好負面的例子)就是這樣製作的。此外一些光箱(跳窗)效果也是這樣製作的喔。

原始碼

HTML

<div class="box box5">
  <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;
}
.content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

實際示範頁面

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


上一篇
使用 absolute + margin負值來達到垂直置中的目的
下一篇
使用 absolute + translate 達到CSS垂直置中的效果
系列文
連續30天的超實務網頁設計的垂直置中教學30

尚未有邦友留言

立即登入留言