DIV 内层>DIV相对与外层垂直水平居中

来源：互联网发布：js异步完成执行函数编辑：程序博客网时间：2024/06/05 11:08

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <style type="text/css">        .one{            width: 500px;height: 500px;background-color: #29ABE2;            position: relative;            top: 200px;left: 200px;        }        .two{            width:200px ;height: 200px; background-color: darkmagenta;            position: relative;            top: 50%;            left: 50%;            transform: translate(-50%,-50%);        }    </style>    <body>    <div class="one">        <div class="two"></div>    </div>    </body></html>

transform定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
为了更好地理解 transform 属性，
默认值： none
继承性： no
版本： CSS3
JavaScript 语法： object.style.transform=”rotate(7deg)”
语法
transform: none|transform-functions;

值描述 none 定义不进行转换。 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换，只是用 X 轴的值。 translateY(y) 定义转换，只是用 Y 轴的值。 translateZ(z) 定义 3D 转换，只是用 Z 轴的值。 scale(x,y) 定义 2D 缩放转换。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。 rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图。

0 0