不固定高度盒子垂直与水平居中

2.通过定位position，注意，关键的child的margin:auto;一定不能忘记设置；

3.通过position定位和 transform:translate(-50%,-50%)；

.box{
            width:300px;
            height:200px;
            border:1px solid red;
            position: relative;    
        }
        .child{
            width: 150px;
            height: 100px;
            background-color: green;
            position: absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%); 
        }

当然通过flex盒子模型也是可是的，在此就不再给出代码演示，具体可以了解一下flex盒子模型