zoukankan      html  css  js  c++  java
  • transform的妙用---实现div不定宽高垂直水平居中

    transform的兼容性

    transform的兼容性还是比较乐观的。IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D转换。

    谷歌和Safari支持代替的-webkit-transform属性。IE9以上、火狐和欧朋是兼容的。

    transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

    在此,可妙用其移动的属性。

    遇见div不定宽和高垂直水平居中的问题。记得以前都是用js去实现。现在可以用 transform进行实现。

    <div class="demo">
       <img src="img/pic3.jpg" />
    </div>
    复制代码
    .demo{
        position: fixed;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
  • 相关阅读:
    note
    deep learning
    matlab远程调试
    faster rcnn
    十一旅行
    python生成随机数
    python 读取mat文件
    opencv anaconda
    python文件操作
    python换行
  • 原文地址:https://www.cnblogs.com/yzadd/p/6902297.html
Copyright © 2011-2022 走看看