1绝对定位垂直居中
css部分
html
效果图
不定长的绝对定位居中，原理比较简单，首先将top,left各偏移百分之50，这时候左上角的顶点是垂直水平居中的，再用css3的属性transform：translate(X，Y)相对于自身向相反方向各平移百分之五十，就可以实现垂直居中了
2.flex布局实现垂直居中
flex是css新属性，非常好用，兼容性问题也在逐步解决，可以一试
css
html
image.png
justify-content: center;主轴居中
align-items: center;次轴居中
想详细了解flex的可以看阮一峰老师的讲解
3.table-cell垂直居中
css
效果图
简单实用，兼容性好
4.inline-block配合伪元素垂直居中
css
效果图
伪元素是在所使用它的元素内部的最后加入，如开始的代码中就是在.parent:after会在div.parent容器的最后（即div.son后面）加上一个高度为100%宽度为0的元素，原理是同一个容器中的两个inline-block元素设置vertical-align：middle实现的居中对齐，缺点是div.son宽度100%时，无法垂直居中，只能将div.son的宽度缩小一点，用calc()或者设置max-width：99%
