CSS:垂直居中

1.使用table-cell+vertical-align

    
        
        
        
    
    
        

            
Demo
        
    

原理：通过将父框转化为一个表格单元格显示（类似），再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。

优点：兼容性好，ie8以上均支持

2.使用absolute+transform

    
        
        
        
    
    
        

            
DEMO
        
    

原理：类似于水平居中时的absolute+transform原理；

3.使用flex+align-items

    
        
        
        
    
    
        

            
Demo
        
    

4.使用flex+flex-direction+justify-content

    
        
        
        
    
    
        

            
DEMO
        
    

5.使用absolute+margin负边距

    
        
        
        
    
    
        

            
DEMO
        
    

缺点：需知道子元素宽，高；以及高的一半；

6.使用absolute+margin

    
        
        
        
    
    
        

            
DEMO
        
    

7.使用padding

    
        
        
        
    
    
        

            
DEMO
        
    

原理：设置父元素padding值上下一样，不能设置高度，这样子元素看起来是在中间；