对于一个未知宽高的盒子，如何让它水平垂直居中于父元素？

1. table

display: table;使父元素的作用像table元素一样，display: table-cell;使子元素的作用像td一样。给此时的子元素用vertical-align和text-align设置水平垂直居中，子元素其中的未知宽高的元素当然就相对子元素水平垂直居中了。

  
    
    
  
  
    

      

        
        hahaha
      
    
  

2. JS计算

  
    
    
  
  
    

      
hahaha
    
    
  

3. transform

transform:translate(tx[,ty])

定义2D转换。tx表示x方向偏移，ty表示y方向偏移。如果tx,ty为百分比的话，其参考值是元素本身的宽高，正适合未知宽高的居中定位。

  
    
    
  
  
    

      
hahaha
    
  

4. flexbox（弹性容器布局）

  
    
    
  
  
    

      
hahaha
    
  

5. grid（网格布局）

  
    
    
  
  
    

      
hahaha