html:
    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <link rel="stylesheet" href="../css/reset.css">
    8.     <link rel="stylesheet" href="../css/73绝对定位元素的位置.css">
    9. </head>
    10. <body>
    11.     <div class="box1">
    12.         <div class="box2"></div>
    13.     </div>
    14. </body>
    15. </html>

    css:
    （1）
    使用
    top+margin-top+padding-top+border-top+height + border-bottom+padding-bottom+margin-bottom+ bottom; 九个值来匹配内容的高度,其中会有一些特别需要注意的点
    1.当同时设置top:0px; bottom:0px;时， 浏览器会显示top:0px;的内容，而忽略bottom:0px;的内容
    2.当九个值高度不匹配内容高度时，过度匹配，那么浏览器会自动将自动操作bottom值，来匹配内容高度
    3.设置top:0px; bottom:0px;时，设置margin-top: auto; 和margin-bottom: auto;会垂直居中。
    只有top、bottom、margin、height可以设置auto;如果这几个均设置了auto,则浏览器会是使得width值等于内容高度
    4.同理width类似，但是left:0px; rigtht:0px;时， 浏览器会显示right:0px;的内容

    水平布局
    left + margin-left + border-left + padding-left + width + paddin
    -当我们开启了绝对定位后:
    水平方向的布局等式就需要添加left 和 right两个值
    此时规则和之前一样只是多添加了两个值:
    当发生过度约束:
    如果9个值中没有auto则自动调整right值以使等式满足如果有auto，则自动调整auto的值以使等式满足
    -可设置auto的值
    margin width left right
    -因为left和 right的值默认是auto，所以如果不知道left和right
    则等式不满足时，会自动调整这两个值
    垂直方向布局的等式的也必须要满足
    top + margin-top/bottom + padding-top/bottom + border-top/bo

    代码：

    .box1 {
    width: 500px;
    height: 500px;
    background-color: darkcyan;
    position: relative;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: #bfa;
    position: absolute;
    left:0px;
    right:0px;
    /* width: auto; */
    /* margin-left: auto;
    margin-right: auto;  */
    top: 0px;
    bottom: 0px;
    /* height: auto; */
    /* margin-top: auto;
    margin-bottom: auto; */
    margin: auto;
}

    image.png