需求要求：

1.子容器相对父容器垂直居中

2，子容器与父容器的自身高度都是自适应的

解决方案一（table-cell+vertical-align）

     
    
      
       DEMO
      
     

要点:

vertical-align属性可以作用在inline元素，inline-block元素以及table-ceil上

方案一优点：兼容性好，兼容Ie8+（包括ie8）

缺点：.Ie6.7不兼容table-ceil,可以通过改成table结构的方法来兼容

 

 

 

 

解决方案二（absolute+transform）

     
    
      
       DEMO
      
     

方案二优点：absolute脱离文档流，不会对其他元素产生影响，

缺点：transform:不支持Ie6,7，8，兼容性达不到要求，可以在不同的浏览器前加上私有前缀

 

 

 

 

解决方案三（flex+align-items）

     
    
      
       DEMO
      
     

方案一优点：只要给parent设置就可以了

缺点：flex不支持Ie6,7，8，兼容性达不到要求