首页 > 代码库 > transform的妙用---实现div不定宽高垂直水平居中
transform的妙用---实现div不定宽高垂直水平居中
transform的兼容性
transform的兼容性还是比较乐观的。IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D转换。
谷歌和Safari支持代替的-webkit-transform属性。IE9以上、火狐和欧朋是兼容的。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
在此,可妙用其移动的属性。
遇见div不定宽和高垂直水平居中的问题。记得以前都是用js去实现。现在可以用 transform进行实现。
<div class="demo"> <img src="http://www.mamicode.com/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不定宽高垂直水平居中
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。