Центрировать текстовый символ ☢ по вертикали и горизонтали внутри круга (CSS)

Я пытаюсь центрировать этот текстовый символ ☢ внутри круга. (& # 9762;)

В то время как IE 10 отображает текст по центру по вертикали и горизонтали, Chrome и Firefox отображают слишком много отступов в верхней части.

Любые идеи, как это исправить? (Flexbox не обязательно должен быть)

HTML

<div class="tl-icon">
<div>☢</div>
</div>

CSS

.tl-icon {
    align-items: center;
    background: black;
    border-radius: 50%;
    color: yellow;
    display: flex;
    font-size: 3em;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

Смотрите демо-версию здесь:http://codepen.io/dash/pen/ZYePWP

Ответы на вопрос(4)

Ваш ответ на вопрос