元素垂直居中

<div class='wrapper'>
    <div class='inside'></div>
</div>

1.定位

.wrapper {
    position: relative;
    width: 100px;
    height: 100px;
}
.inside {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
   height: 20px;
}

.wrapper {
    position: relative;
    width: 100px;
    height: 100px;
}
.inside {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 20px;
    height: 20px;
}

2.基线对齐

.wrapper：before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: center;
}
.inside {
    vertical-align: center;
}