在其父级内垂直居中字形

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;
}

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

Answer 1

用 div 或其他元素包裹图标...

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

...然后使用 display: flex 将 flexbox 布局应用于该包装器。现在您可以使用 align-items 和 justify-content 规则将图标完美地居中在包装元素中：

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