CSS垂直居中真是一个令人头疼的事，最近遇到了一个较为简单且通用的方法，总结如下：

1.无需要设置自己高度，和父容器高度, 利用绝对定位只需要以下三行：

parentElement{
    position:relative;
}
childElement{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

2.若只有父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

parentElement{
    height:xxx;
}
.childElement {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

例子猛击:DEMO

---

Flex布局

如果你不需要兼容老式浏览器(例如IE9及以下)，使用Flex布局可以非常轻松实现

浏览器支持如下：

样式：

parentElement{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*交叉轴居中，这里由于flex-direction默认是row,即垂直居中*/
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

例子猛击:Flex demo

---

Flex教程可参考这里