transform的妙用---实现div不定宽高垂直水平居中

transform的兼容性

transform的兼容性还是比较乐观的。IE9以下不兼容，IE9支持代替的-ms-transform属性不过只支持2D转换。

谷歌和Safari支持代替的-webkit-transform属性。IE9以上、火狐和欧朋是兼容的。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

在此，可妙用其移动的属性。

遇见div不定宽和高垂直水平居中的问题。记得以前都是用js去实现。现在可以用 transform进行实现。

<div class="demo">

　　 <img src="img/pic3.jpg" />

</div>

.demo{

    position: fixed;

    top:50%;

    left:50%;

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

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

}

巴特西

transform的妙用---实现div不定宽高垂直水平居中

transform的兼容性

最新文章

热门文章