html - 在圆圈内垂直和水平居中文本字符 ☢ (CSS)

Question

我试图将此文本字符 ☢ 置于圆圈的中心。 (☢)

虽然 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

Answer 1

问题是内在 child 是一个与你的高度有关的文本。

我添加了一个 line-height 似乎稍微修复了它:

.tl-icon div{
  line-height:1px;
}

http://codepen.io/anon/pen/ZYePBZ