css垂直居中的方法很多，其中有些方法是依赖固定宽高实现，这些写法非常不友好，我自己项目中很少使用。
我习惯使用以下两种方法
1、CSS3的transform来实现
<div id="wrapper">
<div class="middle-contents">
</div>
</div>
#wrapper {
position: relative;
}
.middle-contents {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
2、flex布局
<div id="wrapper"></div>
#wrapper {
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
}
