不知道有没有更好的办法了。。

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

http://www.imooc.com/learn/542

我一般使用的方法：
（1）使用display:table，没有什么兼容性问题，个人觉得还是比较好用的。

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

ps：如果要做两个元素绝对对齐，可以优先考虑display:table;(父级) display: table-cell;(子级)，这两个真可以算是最佳搭配，而且屡试不爽。vertical-align: middle;只在display:inline;（行内元素起作用）

规定好字号，及图片大小，用相对定位 或者 作为背景图片，下面是相对定位：

直接上flex布局，用多了你会发现传统的写法没有一个能比得上弹性盒子来得爽。

第二种：
这种办法比较粗暴。。直接把图片绝对定位，然后居中

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