I am working with some legacy code right now and I see all variations of calculated paddings and margins to center icons in a parent container. Phew...

The simplest way to achieve this is to set the icons line-height the same as its parent container's height. And then set a text-align: center on the parent container.

  .parent-container {
  width: 500px;
  height: 500px;
  background-color: grey;
  text-align: center
}

.icon {
  line-height: 500px;
}

  <div class="parent-container">
  <span class="icon">&#9749</span>
</div>

Voila!


150 0 0