position-absolute的居中问题

按老师的方法书写在浏览器中不能居中老师帮忙看一下呗

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>绝对定位</title>
   <style type="text/css">
       /*.block {
           width: 80px;
           height: 80px;
           line-height: 80px;
           text-align: center;
           border: 2px solid black;
       }*/
           /*.block:nth-child(1){
               position: absolute;
               left: 20px;
               top: 20px;
               border-color: blue;
               z-index: 999999;
           }*/
       /*.block:nth-child(2){
           position: absolute;
           left: 20px;
           top: 20px;
           width: 50%;
           height: 50%;
           border-color: red;
           z-index: 1;
       }*/
       .parent {
           position: relative;
           width: 200px;
           height: 150px;
           background: blue
       }
       .child {
           position: absolute;
           width: 80px;
           height: 80px;
           background:red;
           top: 0;
           right: 0;
           left: 0;
           bottom: 0；
           margin:auto auto;
       }

   </style>
</head>
<body>
   
   <div class="parent">
      <div class="child">

      </div>
   </div>
</body>
</html>

慕神7119415 2018-08-19

源自：CSS定位 2-5 position-absolute

收起

1回答

好帮手慕珊 2018-08-20 11:25:49

改正后的代码如下：注意看一下关于top和left的注释。祝学习愉快！
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style type="text/css">
        /*.block {
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border: 2px solid black;
        }*/
            /*.block:nth-child(1){
                position: absolute;
                left: 20px;
                top: 20px;
                border-color: blue;
                z-index: 999999;
            }*/
        /*.block:nth-child(2){
            position: absolute;
            left: 20px;
            top: 20px;
            width: 50%;
            height: 50%;
            border-color: red;
            z-index: 1;
        }*/
        .parent {
            position: relative;
            width: 200px;
            height: 150px;
            background: blue
        }
        .child {
            position: absolute;
            width: 80px;
            height: 80px;
            background:red;
            top: 35px;
            /*  top和left都是通过计算得到的，如top
            是parent的宽度减去child的宽度，然后除以2*/
            left: 60px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <!-- <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div>
     -->
     <div class="parent">
         <div class="child">
             
         </div>
     </div>
</body>
</html>

收起回答