1.移动端（安卓设备、ios设备）图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局，可以快捷有效实现子元素未知高度绝对垂直居中对齐。PC端考虑到兼容性的问题，一般不推荐使用弹性盒子，依旧只能采用传统方式（vertical-align: middle;或者position定位）实现图标文字对齐。

2.

实际上不管是line-height还是用position去定位，不管你display用的什么，不同机型的显示效果都会不一样。

水平上的差距几乎没有，垂直方向上的效果会多种多样。

遇到这种ui，我的做法是把图片写在::before里，用margin去定位，这样不管右侧的文案是否绝对的垂直居中，但至少图是相对文案去定位的，是和文案对齐的。

3. 使用display:table

    
    
     
 
       
     
 
     
      关闭
     
 
    

 

*{
    padding:0;margin:0;} .close-btn{ background:red;color:#fff;height:45px;width:120px;border-radius:5px;text-align:center;display: table} .img-responsive , .close{ display: table-cell;vertical-align: middle}