水平垂直居中一个元素（五种方法）

第一种：使用定位（已知本身元素宽高）

/*子元素*/
.div1{
   
   
    width: 400px;
    height:400px;
    background-color: red;
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
}

第二种：使用定位（利用transform）

方便后期维护，后