CSS centered position in Div differs in FF/Chrome

Question

I have a span which is centered horizontally and vertically in its parent with the following CSS:

.cal-day {
  font-size: 1.8em;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="calendar-button">
  <a href="#">
    <span class="icon-calendar"></span>
    <span class="cal-day">21</span>
  </a>
</div>

(.icon-calendar is an icomoon-font, position is relative to make the parent div create space)

This works in Chrome and Safari. in Firefox, the container is a few pixels off to the top (I attached an image).

I guess, it's the font that is being rendered different in FF/Chrome... But how can I make them render it equally?

Any ideas?