欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS居中效果之transform的使用

  發(fā)布時間：2015-07-15 17:04:19   作者：佚名   我要評論
這篇文章主要介紹了CSS中使用transform達到布局居中的效果的方法,注意其和其他transform樣式之間的沖突問題,需要的朋友可以參考下

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

CSS Code復制內容到剪貼板
  1. .is-Transformed {    
  2.   width: 50%;   
  3.   margin: auto;   
  4.   position: absolute;   
  5.   top: 50%; left: 50%;   
  6.   -webkit-transform: translate(-50%,-50%);   
  7.       -ms-transform: translate(-50%,-50%);   
  8.           transform: translate(-50%,-50%);   
  9. }  

2015715162720790.jpg (608×401)

好處：

    內容高度可變
    代碼量小

同時注意：

    不支持IE8
    需要寫廠商前綴
    會和其他transform樣式有沖突
    某些情況下的邊緣和字體渲染會有問題

相關文章

  • css3 transform屬性詳解

    transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
    2014-09-30

  • CSS中使用負margin值來調整居中位置

    這篇文章主要介紹了CSS中使用負margin值來調整居中位置的方法,文中同時提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下
    2015-07-15

  • 僅使用CSS做到完全居中的超級攻略

    這篇文章主要介紹了僅使用CSS做到完全居中效果的方法,強烈推薦!需要的朋友可以參考下
    2015-07-15

最新評論