方法一：
.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>-----完-----
垂直居中—3行CSS3代码
原文地址：http://www.cnblogs.com/pengshengguang/p/7679817.html