使用margin+border实现居中

最新推荐文章于 2025-02-12 09:04:39 发布

原创最新推荐文章于 2025-02-12 09:04:39 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#居中

html 专栏收录该内容

14 篇文章

订阅专栏

本文通过一个简单的HTML页面展示了如何使用CSS进行基本布局。页面包含两个嵌套的div元素，通过设置不同的宽度、高度和背景颜色来展示元素之间的相对位置。外层div采用红色背景并居中显示，内层div为黄色背景同样居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

            .f{
                width:498px;
                height:498px;
                background:red;
                border:1px solid red;
                margin:50px auto;

            }

            .s{
                width:200px;
                height:200px;
                background:yellow;
                margin:150px auto;
            }
        </style>
    </head>
    <body>

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