zoukankan      html  css  js  c++  java
  • 垂直水平居中--css3

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

    利用CSS3的transform:translate

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

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

  • 相关阅读:
    ios 开发证书制作
    iOS UILable 高度自适
    asp 中创建日志打印文件夹
    ios iphone、ipad启动画面尺寸
    ios 更改UITableview中Section的字体颜色
    Azure Blob 存储简介
    java追加文件
    java读取文件
    DNS原理及其解析过程
    单点登录原理与简单实现
  • 原文地址:https://www.cnblogs.com/luckyuns/p/6264334.html
Copyright © 2011-2022 走看看