iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0

簡言

繼續用 Grid 來置中,由於 Grid 物件對空間解讀的特殊性,我們只要在父層物件設定 display: grid,接著在需要垂直置中的物件上設定 margin: auto 即可自動置中囉。(咦?這描述怎似曾相似)

原理說明

一般來說 margin 這屬性的值採用 auto 時,水平方向是會有作用,但垂直通常沒作用,這是因為資料的排列都是以「行」來看,所以 margin:auto 在「該行」中,置中了你也看不出來XD,因為行高就那樣的矮啊,但目前的 flex 跟 grid 都是新的特殊屬性,在這兩個特殊屬性中,margin:auto變得對垂直區域有效了,為什麼呢?因為「行」變高了,變得跟父層空間一樣高,這時變成整塊空間都是我的致中了(咦),垂直置中就這樣搞定了,是不是很簡單啊。

原始碼

HTML

<div class="box box18">
  <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;
}
.content{
  width: 400px;
  background: #ccc;
  margin:auto;
}

實際示範頁面

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


上一篇
使用 Grid + place-content 製作垂直置中區塊
下一篇
使用 Display: table-cell 做網頁垂直置中
系列文
連續30天的超實務網頁設計的垂直置中教學30

尚未有邦友留言

立即登入留言