未知宽高的元素实现水平垂直居中

方法一：父元素display:table; 子元素：display:cell-table

优势，父元素可以动态改变高度

劣势：table属性容易造成多次reflow,IE8以下不支持

    
                
    
        
     
      hello world
     
    
    

方法二：利用空元素和伪类：

优点：兼容性好

缺点：多出来个空元素，麻烦

以下代码的注释部分是替代after伪类的另一种写法，原理一样

    
                
    
      
             
     
      hello world
      
hello world
     
    
    

方法三，绝对定位+transform

优点：方便,支持webkit内核

缺点：transform兼容性差，IE9以下不支持

    
                
    
        
     
      hello world
      
hello world
     
    
    

方法四，flex布局

优点:方便

缺点：兼容性不好,IE支持很差

    
                
    
        
     
      hello world
      
hello world