以下总结了一些常见的元素垂直居中方法：
首先，基本的html和CSS为
#wrap{
320px;
height: 160px;
background: red;
}
#wrap>div{
50px;
height: 50px;
background: black;
color: #fff;
}
<div id="wrap">
<div class="v-center">我是前端狗</div>
</div>
方法：
/*方案一：绝对定位负margin50%方法*/
/*#wrap{position: relative;}*/
/*.v-center{
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}*/
/*方案一 优化版:利用calc支持单位运算，致命缺点UC这2货嗝屁了，国内移动端别想了*/
/*.v-center{
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
}*/
/*方案一 再优化版：利用translate
* 注意transform需要加上webkit UC QQ 自带浏览器在本手机上完美支持
* 优点是不需要知道居中元素的高宽！！！
* 这里translate的50%就是自己高宽的50%，而margin是以父亲的宽度为基准
* */
/*.v-center{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}*/
/*方案二： 脱离绝对定位，利用视口单位
* 因为vh是视口单位，视口就是屏幕可视区域，也就是说，这种办法永远在屏幕居中
* 居中弹层才考虑这种办法，并且UC还是不支持
* 好吧，这种方法当我没说
* */
/*.v-center{
margin: 50vh auto 0;
-webkit-transform: translateY(-50%);
}*/
/*方案三： table-cell
* 请不要歧视table，table-cell在这个demo中支持度完美
* 但是wrap此时不能使用margin了，就像每一种药都多少有点副作用一样。。
*/
/*#wrap{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.v-center{
display: inline-block;
}*/
/*方案四： 利用浮动元素
* 支持度完美
* 缺点是还是需要知道元素高度，以及hack味道很浓
*/
/*#wrap::before{
content: '';
float: left;
height:50%;
margin-bottom:-25px;
}
.v-center{
clear:both;
margin: auto;
}*/
/*方案五： flex
*UC不支持
* */
#wrap{
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.v-center{
margin: auto;
}
最后有个好消息，QQ浏览器的X5即将退出历史舞台被chrome37替换，UC你看着办。