css/css3 常用垂直居中和水平居中的方法

• on 28 Oct 2020
• By 1141727@qq.com
• HTML/JS/CSS

css/css3 常用垂直居中和水平居中的方法

ps：未考虑兼容问题

/* 第一种*/
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 第二种*/
.box {
    text-align: center;
    vertical-align: middle;
}

/* 第三种 */
.box {
    display: flex;
    justify-content: center;
    align-items: center
}