移动端垂直居中对齐

文章目录

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

利用CSS3transform: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上写样式,或者需要额外容器
  • 需要各种厂商前缀兼容现代浏览器
  • 可能有潜在的性能问题

兼容性:

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

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:移动端垂直居中对齐 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/mobile-translate.html)

发表评论

请登录后发表评论: