position实现居中

最新推荐文章于 2024-10-15 16:13:47 发布

原创最新推荐文章于 2024-10-15 16:13:47 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#position实现居中

css 同时被 2 个专栏收录

17 篇文章

订阅专栏

html

14 篇文章

订阅专栏

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

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

            .s{
                width:200px;
                height:200px;
                background:yellow;
                position:absolute;
                top:50%;
                left:50%;
                margin-top: -100px;
                margin-left: -100px;   
            }
        </style>
    </head>
    <body>
        <div class="f">
            <div class="s"></div>
        </div>
    </body>
</html>