CSS3：2D转换之translate移动及盒子垂直水平居中

最新推荐文章于 2024-07-08 17:02:45 发布

独憩

最新推荐文章于 2024-07-08 17:02:45 发布

阅读量239

点赞数

分类专栏：前端文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_54517101/article/details/126304186

版权

前端专栏收录该内容

53 篇文章 5 订阅

订阅专栏

transform: translate(1000px,100px);

表示x方向移动1000px,y方向移动100px

优点是，移动之后不会影响其他的元素：

        .one{
            width: 200px;
            height: 200px;
            background-color: red;
            transform: translate(100px,100px);

        }
        .two{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }   


    </style>
</head>
<body>
    <div class="one">
        

    </div>
    <div class="two">

    </div>

盒子垂直水平居中

采用的方法是先用定位移动50%，再用translate移动-50%。此处translate移动的百分比是针对移动者本身的：

    <style>
        .one{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: red;


        }
        .two{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: aqua;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }   


    </style>
</head>
<body>
    <div class="one">
        <div class="two">

        </div>
    </div>


</body>