设置元素垂直水平居中

// 垂直居中的几种方式
// 1.元素的宽高已知，可以用绝对定位，top/left设为（50%-高/宽的一半）实现
.main {
    position： absolute;
    top: calc(50% - 3em);
    left: calc(50% - 9em);
    width: 18em;
    height: 6em;
}
// 2.宽高未知，利用绝对定位以及translate（-50%， -50%）实现
.main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
// 3.利用flex伸缩盒子布局实现，设置水平居中和垂直居中
.main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18em;
    height: 6em;
}
// 4.body设为flex布局，元素设置margin：auto实现水平和垂直居中
body {
    display: flex;
    
    .main {
        margin: auto;  // 父元素设置flex后，margin: auto将会在垂直和水平方向都居中
    }
}
// 5.元素宽高已知，利用绝对定位，上下左右四个方向值设为0，同时margin：auto实现垂直水平对齐
.main {
    width: 6em;
    height: 6em;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}