div盒子垂直居中的3种方法

<div class="father">
    <div class="son"></div>
</div>

.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 20px auto;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
}

.father {
overflow: hidden;/触发BFC，避免父子元素外边距合并/
}
.son {
margin-top: 100px; /外边距控制垂直方向位置/
}

.father {
position: relative; /定位/
}
.son {
position: absolute;
top: 50%;
transform: translateY(-50%); /定位/
}
.father {
display: table-cell; /利用table的vertical-align实现/
vertical-align: middle;
}