方法一 父table  + 子table-cell + vertical-align:center

思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中优点：父元素（parent）可以动态的改变高度（table元素的特性）

缺点：IE8以下不支持

.parent1{

    display: table;

    height:300px;

    width: 300px;

    background-color: #FD0C70;

}

.parent1 .child{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

    color: #fff;

    font-size: 16px;

}

方法二：inline-block + vertical-align：middle

思路：使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0

注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。

.parent span {

    display: inline-block;

    width: 0;

    height: 100%;

    vertical-align: middle;

    zoom: 1;

    *display: inline;

}

.parent .child {

    display: inline-block;

    color: #fff;

    zoom: 1;

    /*BFC*/

    *display: inline;

}

<div class="parent">

    <span></span>

    <div class="child">hello world-2</div>

</div>

缺点：多了一个没用的空标签，display:inline-block，IE 6 7是不支持的(添加上：_zoom1; *display:inline)。当然也可以使用伪元素来代替span标签，不过IE支持也不好，但这是后话了

方法三：absolute + translate

思路：父元素相对定位，子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%，这里translate的百分比是相对于元素自身)优点：高大上,可以在webkit内核的浏览器中使用缺点：不支持IE9以下不支持transform属性

方法四：flex

思路：使用css3 flex布局优点：简单 快捷缺点：兼容不好，详情见：http://caniuse.com/#search=flex