SOURCE

// 更多其他居中方案：https://www.cnblogs.com/huchong-bk/p/11821088.html

<div class="demo demo01">
  <i class="iconfont icon-shipinbofangyingpian2"></i>
  <span>字体图标和文字</span>
</div>

<div class="demo demo02">
  <img src="http://cdn.jsrun.top/css/img/logo.png" class="logo" />
  <span>img和文字</span>
</div>

<div class="demo demo02">
  <a class="img"></a>
  <span>background-img和文字</span>
</div>

.demo {
  margin-bottom: 10px;
  border: 1px solid #000;
  padding: 10px;
  width: 300px;
  height: 50px;
  line-height: 50px;  // 与高度一致
  font-size: 0;  // 消除偏差，使垂直居中更精准
}
.logo {
  width: 40px;
  vertical-align: middle;
  border: 1px solid red;
}
.img {
  vertical-align: middle;
  background: url("http://cdn.jsrun.top/css/img/logo.png") 50% 50%  no-repeat;
  width: 50px;
  height: 30px;
  display: inline-block;
  border: 1px solid red;
}