Web前端利用定位实现盒子居中

最新推荐文章于 2023-07-02 21:23:54 发布

山人甲

最新推荐文章于 2023-07-02 21:23:54 发布

阅读量588

点赞数

本文链接：https://blog.csdn.net/weixin_44252534/article/details/87922997

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山人甲</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #cccccc;
        }
        /*1：居中 层次关系 ---》 定位 固定+ 绝对 脱标 层次 */
        .loginBox {
            /*css 位置属性 （定位 浮动） 转换模式   宽 高  文本属性以及其他属性 */
            position: fixed;
            left:50%;   /*向右移动父盒子的一半*/
            top:50%;
            width: 400px;
            height: 300px;
            background-color: white;

            margin-left: -200px;
            margin-top: -150px;
         /*   bottom:;
              right:*/
        }
    </style>
</head>
<body>
<div  class="loginBox"></div>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
<p>safdgdfhgf</p>
</body>
</html>