方法一：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
这用用的好处了，无论是块级元素还是行内元素，都可以进行垂直居中，
transform意思是变形，是css3的内容
注意，这只是垂直居中，如果是上下左右居中，还需要加个width与margin:atuo
想看详细信息，可看出处：http://www.webhek.com/post/translatey-vertical-align.html
方法二：
就像下面，只需要给.container三行css规则就可以使它在水平方向和垂直方向均处于居中。
.container {
display: flex;
justify-content: center;
align-items: center;
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.center {
width: 200px;
height: 200px;
margin: 0 auto;
background: #1879D9;
}
.center p {
background: #fff;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 100px;
}
</style>
</head>
<body>
<div class="center">
<p>垂直居中内容</p>
</div>
</body>
</html>
-----完-----
原文：http://www.cnblogs.com/pengshengguang/p/7679817.html