CSS居中效果之transform的使用
發(fā)布時(shí)間：2015-07-15 17:04:19 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS中使用transform達(dá)到布局居中的效果的方法,注意其和其他transform樣式之間的沖突問題,需要的朋友可以參考下
簡(jiǎn)單有效，同時(shí)支持可變高度。為內(nèi)容指定帶有廠商前綴的transform: translate(-50%,-50%)和top: 50%; left: 50%;樣式就可以讓內(nèi)容塊居中。
CSS Code復(fù)制內(nèi)容到剪貼板
- .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%);
- }
好處：
內(nèi)容高度可變
代碼量小
同時(shí)注意：
不支持IE8
需要寫廠商前綴
會(huì)和其他transform樣式有沖突
某些情況下的邊緣和字體渲染會(huì)有問題
相關(guān)文章
- transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。2014-09-30
CSS中使用負(fù)margin值來調(diào)整居中位置
這篇文章主要介紹了CSS中使用負(fù)margin值來調(diào)整居中位置的方法,文中同時(shí)提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下2015-07-15- 這篇文章主要介紹了僅使用CSS做到完全居中效果的方法,強(qiáng)烈推薦!需要的朋友可以參考下2015-07-15