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

最新推荐文章于 2023-07-19 23:34:57 发布

爱摔倒的企鹅

最新推荐文章于 2023-07-19 23:34:57 发布

阅读量799

点赞数

分类专栏： CSS布局

本文链接：https://blog.csdn.net/qq_24070723/article/details/51233036

版权

CSS布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DIV 内层>DIV相对与外层垂直水平居中

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .one{ width: 500px;height: 500px;background-color: #
复制链接

扫一扫