方法一：定位
父元素：
position:relative
子元素：
position:absolute;
top:50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
方法二：flex布局
父元素样式:
display: flex;
align-items: center;
justify-content: center;
方法三：
<style type="text/css">
.middle-panel2{
width:500px;
border:1px solid #888;
display:inline-block;
vertical-align: middle;
}
.parent-panel2{
width:100%;
height:400px;
border:1px solid #888;
}
.parent-panel2:after{
/**主要代码*/
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
}
</style>
参考：http://blog.csdn.net/rongku/article/details/40452231
