transform的作用
transform 属性向元素应用 2d 或 3d 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(w3cschool)
transform的兼容性
transform的兼容性还是比较乐观的。IE9以下不兼容，IE9支持代替的-ms-transform属性不过只支持2D转换。
谷歌和Safari支持代替的-webkit-transform属性。IE9以上、火狐和欧朋是兼容的。
想必大家在实际项目中肯定会遇见p不定宽和高垂直水平居中的问题。记得以前都是用js去实现。
其实用css来实现也有好几种方法。但是个人觉得还是用transform来实现更简单和方便就是不兼容IE9以下浏览器。
立即学习“前端免费学习笔记（深入）”；
现在给大家展示最近项目当中运用到的实例
在写轮播图的时候下面那些圆点按钮是根据图片张数来确定按钮个数的。所以在写代码时就不能固定承载这些按钮元素的宽，而且还要居中显示。
.scroll { width: 720px; height: 410px; margin: 0 auto; margin-top: 100px; overflow: hidden; position: relative;}.scroll ul { padding: 10px 0px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); position: absolute; bottom: 0px; left: 50%;}.scroll ul li { float: left; margin: 0px 5px; width: 16px; height: 16px; border-radius: 16px; border:1px #73B613 solid; background: #FCBE47; box-sizing: border-box; }.scroll ul li.scroll_in{ background:#FF6600;}
上面实例当中承载这些按钮的是一个ul元素，ul元素没用定宽高，写了一个定位left:50%离左边百分之五十，如果不写transform的话这样并不居中，右边宽度会包括自身ul的宽度。
transform: translateX(-50%); 这一句的作用就是让ul相对自身位置水平左移自身50%的宽度。这样就刚好实现我们想要的效果。
在实际项目当中我们用的多的还有就是模态框，用p模拟弹窗效果。
上图中的图片是水平垂直居中的。
@@##@@
.demo{ position: fixed; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
其实上面实例和我们写弹窗让其居中是一样的。是不是很简单，有了这个我们就不要用写这么多js求来求去的了。
以上就是css3中关于transform属性实现div不定宽高垂直水平居中的详细介绍的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608782.html
微信扫一扫 
支付宝扫一扫 
