百度前端技术学院任务四：定位和居中问题

最新推荐文章于 2024-11-08 08:31:36 发布

梁远超

最新推荐文章于 2024-11-08 08:31:36 发布

阅读量484

点赞数

分类专栏：百度前端技术学院作品文章标签：前端百度团队技术

本文链接：https://blog.csdn.net/sinat_31515835/article/details/50894475

版权

百度前端技术学院作品专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定位和居中问题

作者：梁远超

页面展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>定位和居中问题</title>
        <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    </head>
    <body>
        <div id="Frame">
                <div class="Circular" id="Circular-A"></div>
                <div class="Circular" id="Circular-B"></div>
        </div>
    </body>
</html>

*{
    border: 0;
}
#Frame{
    height: 200px;
    width: 400px;
    background-color: #ccc;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -200px;
    overflow:hidden;
}
.Circular{
    background-color: #fc0;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}
#Circular-A{

    margin-top: -50px;
    margin-left: -50px;
}
#Circular-B{

    margin-top: 100px;
    margin-left: 350px;
}