盒子居中方法:假设div2在div1中

第一种方法
通过css的margin属性

div2{
        margin-left: (div1.width - div2.width) / 2 + 'px';
        margin-top: (div1.height - div2.height) / 2 + 'px';
}

第二种方法
通过css的position属性

div1 {
          position: relative;
}
div2 {
         position: absolute;
         top: 50%;
         left: 50%;
         margin-left: -(div2.width / 2) + 'px';
         margin-top: -(div2.height / 2) + 'px';
}

第三种方法
通过css的子绝父相规则

 .div1{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            position: relative;


        }
 .div2{
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

        }

第四种方法
通过弹性布局

.div1{
             display: flex;
             justify-content: center;
             align-items: center;
         }

第五种方法
通过固定定位，给父子元素都给一个固定定位，

.div1{
            width: 100px;
            height: 100px;
            border: 1px solid #000；
            position: fixed;


        }
.div2{
            position: fixed;
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            margin: 35px 35px;


        }

第六种方法
通过平移translate属性

.div1{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
           position: relative;
        }
        .div2{
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }