垂直居中

.box {
    width: 100px;
    height: 100px;
    background: #FEE;

    line-height: 100px;
}

.box {
    width: 100px;
    background: #FEE;

    padding: 50px 0;
}

.container {
    width: 100px;
    height: 100px;
    background: #FEE;

    display: table;
}
.box {
    display: table-cell;
    vertical-align: middle;
}

.container {
	width: 100px;
    height: 100px;
    background: #FEE;

    position: relative;
}
.box {
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.box {
    width: 100px;
    height: 100px;
    background: #FEE;

    display: flex;
    align-items: center;
}