字形在其父对象内垂直居中

Question

我有一个我想垂直居中]的图标>，但在其外观中，字形落在其容器jsfiddle here的外面，以绝对定位对其进行黑客攻击非常麻烦。我也尝试了各种使用flexbox布局的技巧，但都无济于事。

<div class="icon-wrap">
    <i class="caret-up icon"></i>
</div>
CSS

.icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid blue;
}

.icon {
  font-style: normal;
  display: inline-block;
  line-height: 60px;
  font-family: Arial;
  font-size: 60px;
  border: 3px solid green;
}

.icon::before {
  content: "\1F891";
  border: 1px solid red;
}
而且字形顶部的多余“填充”似乎是它的一部分（以某种方式？），我想要的是一个[[light-weight

解决方案，它将插入符放置在其容器的中间。 我有一个图标，我想在其父容器中垂直居中，但是它看起来像是，字形落在其容器的外面，在这里是jsfiddle，以绝对定位对其进行黑客入侵就是这样……

Answer 1