CSS - display: table居中

.outer {
  display: table;
  width: 100px;
  height: 100px;
  font-size: 0;
  background: lightblue;
}
.inner {
  display: table-cell;
  vertical-align: middle;
}
.icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: blue;
}
.text {
  font-size: 15px;
}

<div class="outer">
  <span class="inner">
    <span class="icon"></span>
    <span class="text">table居中</span>
  </span>
</div>

绝对定位垂直居中：

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}