translate+position实现居中

最新推荐文章于 2022-07-14 18:50:16 发布

love-study-lele

最新推荐文章于 2022-07-14 18:50:16 发布

阅读量565

点赞数

分类专栏： html css 文章标签： position+absulote实现居

本文链接：https://blog.csdn.net/qq_40639990/article/details/78248204

版权

css 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }

            .f{
                width:500px;
                height:300px;
                background:red;
                margin: 50px auto;
                position:relative;
            }

            .s{
                width:200px;
                height:100px;
                background:yellow;
                position:absolute;
                transform: translate(75%, 100%);
            }

        </style>
    </head>
    <body>

        <div class="f">
            <div class="s"></div>
        </div>
    </body>
</html>