首页 > Web开发 > 详细

垂直水平居中--css3

时间:2017-01-09 11:23:50      阅读:213      评论:0      收藏:0      [点我收藏+]

在移动前端制作中,很多新的css3特性能够帮助我们更好的制作。例如这个垂直水平居中问题,就有一个简单的代码可以解决:

利用CSS3的transform:translate

.center{
width:50%;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
好处:

内容高度可变
代码量小
同时注意:

需要写厂商前缀
需要定义宽度
会和其他transform样式有冲突
某些情况下的边缘和字体渲染会有问题
兼容性:

http://caniuse.com/#search=transform 在这里看到2d的兼容性还是很全面,Android2.x,ios3.x都兼容,推荐用

利用Flexbox

.center {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
好处:

内容可以是任意高宽,溢出也能表现良好
可以用于各种高级布局技巧
注意:

需要在body上写样式,或者需要额外容器
需要各种厂商前缀兼容现代浏览器
可能有潜在的性能问题
兼容性:

移动设备基本兼容,可以放心使用,不过很容易掉坑,慎用。

垂直水平居中--css3

原文:http://www.cnblogs.com/luckyuns/p/6264334.html

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