首页 > 其他 > 详细

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

时间:2017-05-25 11:07:40      阅读:330      评论:0      收藏:0      [点我收藏+]

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不定宽高垂直水平居中

原文:http://www.cnblogs.com/yzadd/p/6902297.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!