常用盒子水平垂直居中方法

html结构：

方式一：position+left+margin-left,适用于子盒子宽高已知的情况

方式二：position+left+translate

方式三：子盒子定位+四个方向的距离为0+margin:auto

方式四：弹性布局父盒子 {display:flex} 子盒子{margin:auto}

        .fa{
          display: flex;
        }
        .son{
            margin: auto;
        }
    

方式五：弹性布局 父盒子：display: flex; justify-content: center;align-items: center;