DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS居中效果之transform的使用
CSS居中效果之transform的使用
編輯:布局實例     

   簡單有效,同時支持可變高度。為內容指定帶有廠商前綴的transform: translate(-50%,-50%)和top: 50%; left: 50%;樣式就可以讓內容塊居中。

  CSS Code復制內容到剪貼板

  .is-Transformed {

  width: 50%;

  margin: auto;

  position: absolute;

  top: 50%; left: 50%;

  -webkit-transform: translate(-50%,-50%);

  -ms-transform: translate(-50%,-50%);

  transform: translate(-50%,-50%);

  }

2015715162720790.jpg (608×401)

  好處:

  內容高度可變

  代碼量小

  同時注意:

  不支持IE8

  需要寫廠商前綴

  會和其他transform樣式有沖突

  某些情況下的邊緣和字體渲染會有問題

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved