让一个子盒子在父盒子中水平垂直居中的方法

1.利用定位(子绝父相)

    <style>
        .parent {
     
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            position: relative;
        }

        .child {
     
            width: 100px;
            height: 100px;
            border: 1px solid #999;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>

    <div class="parent">
        <div class="child">我是子元素</div>
    </div>

通过子绝父相left:50% top:50%让子盒子定到接近父盒子中心的位置,再通过上外边距和左外边距负的子盒子自身宽高一半的距离就可以让子盒子在父盒子中水平垂直