Css 在其父图形中垂直居中

我有一个图标，我想在它的父容器中垂直居中，但是当它出现时，字形落在它的容器之外，用绝对定位对它进行黑客攻击是非常麻烦的。我还尝试了各种各样的flexbox布局技巧，但都没有成功

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

---

还有字形顶部的“填充”似乎是它的一部分（不知何故），我想要的是一个轻量级的解决方案，将插入符号放在容器的中间。

用div或其他元素包装图标……/p>

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

---

谢谢，但我已经尝试过了，它似乎不起作用，我已经更新了JSFIDLE，您可以查看它

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

.icon-wrap {
  display: flex; /* flexbox layout */
  align-items: center; /* horizontal centering */
  justify-content: center; /* vertical centering */
}