未知宽高div水平垂直居中3种方法

方法一：定位

父元素：
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