/* 以定位的方式，实现水平居中效果 */
.position-horizontal-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* flex 布局 */
.flex {
    display: flex;
}

/* 平分父级空间 */
.mean {
    flex: 1;
}

/* 垂直居中 */
.vertical-center {
    display: flex;
    align-items: center;
}

/* 水平垂直居中 */
.horizontal-vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 垂直排列 */
.vertical {
    display: flex;
    flex-direction: column;
}