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

为什么我这个图像没有居中

<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

    .box {

        border: 1px solid #00ee00;

        height: 300px;

        position:relative;


    }


    .box1 {

        position:absolute;

        top:50%;

        left:50%;

        margin:-100px  0 0 -100px;

        width: 200px;

        height: 200px;

        border: 1px solid red;

        

    }

    </style>

</head>


<body>

    <div class="box">

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

    </div>

</body>


</html>


提问者:慕仙3499661 2021-03-27 23:27

个回答

  • WASD2011
    2021-03-28 22:35:18

    position:relative;这个代码有误,此冒号非英文输入法的冒号。