Сосредоточить глиф вертикально в пределах его родителя

Question

У меня есть значок, который я хочу центрировать по вертикали в родительском контейнере, но, как оказалось, глиф выпадает из своего контейнера, jsfiddle здесь , взламывая его с абсолютным позиционированиемпросто так громоздкоЯ также пробовал различные приемы с макетом 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>

... и примените макет flexbox к этой оболочке с помощью display: flex. Теперь вы можете идеально отцентрировать иконку в элементе обертки с помощью align-items и justify-content правил:

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