问答详情
源自：15-3 面试常考题之已知宽高实现盒子水平垂直居中

为什么我的代码没有实现盒子居中呢？


<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

    <title>已知宽高实现盒子水平垂直居中</title>

    <style type="text/css">

    .box {

        border: 1px solid #00ee00;

        height: 300px;

        width:300px;

        <!--父元素设置相对定位-->

        position:relative;


    }


    .box1 {

         <!--子元素设置绝对定位-->

        position:absolute;

         <!--子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置-->

        top:50%;

        left:50%;

         width: 100px;

        height: 100px;

        <!--margin-top和margin-left都设置为自身宽高的一半-->

        margin:-50px 0 0 -50px;

       

        border: 1px solid red;

       

        

    }

    </style>

</head>


<body>

    <div class="box">

        <div class="box1">box1</div>

    </div>

</body>


</html>


提问者：慕粉1303494066 2021-01-03 13:36

个回答

  • QuKin
    2021-01-21 14:03:43

    首先注释有点问题，

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>已知宽高实现盒子水平垂直居中</title>
    <style type="text/css">
        .box {
            border: 1px solid #00ee00;
            height: 300px;
            width:300px;
            position:relative;
            margin: 0 auto;
        }

        .box1 {
            position:absolute;
            top:50%;
            left:50%;
            width: 100px;
            height: 100px;
            margin:-50px 0 0 -50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">box1</div>
</div>
</body>
</html>


    0
  • 慕圣6778737
    2021-01-04 15:31:15

    注释用的不对吧，应该用/**  **/

    0