水平垂直居中的优雅实现

1、定宽高

.parent {
    position: relative;
}
.child {
    position: absolute;
    width: 200px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 100px);
}

1、不定宽高

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.parent {
    display: grid;
}
div.child {
    justify-self: center;
    align-self: center;
}

.parent {
    display: flex;
}
.child {
    margin: auto;
}

3、Flexbox

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

4、基于视口单位的解决方案

.box {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}