如何在 Chrome 中视觉上水平居中一个表情符号？

Question

在谷歌浏览器中将表情符号在视觉上水平居中非常困难，因为表情符号右侧似乎有不应该存在的空白。一个例子：

.avatar {
  width: 30px;
  
  padding: 10px;
  background-color: #eee;
  border-radius: 50%;
  
  display: grid;
  justify-items: center;
  align-items: center;
}

<div class="avatar">
  <div>&#x1F436;</div>
</div>

https://codepen.io/tommedema/pen/xxbXBRe

在 MacOS Catalina 10.15.2 上的 Chrome 79.0.3945.79 中，它呈现为：

显然，它在视觉上不是水平居中的。然而，在其他浏览器（如 Safari 和 Firefox 71）中，它是：

关于 Carol 使用 font-size 和 box-sizing 的回答，结果还是一样。我选择了表情符号/文本，以便您可以更清楚地看到表情符号右侧有空格的问题，但仅在 Chrome 上而不是在其他浏览器上：

Answer 1

这似乎是一个旧的 Chromium 渲染错误，特别影响 Retina 设备。这可能可以解释为什么其他一些发帖者建议的解决方案对您不起作用！

请参阅此处的错误报告：https://bugs.chromium.org/p/chromium/issues/detail ?id= 551420。当然，没有修复的预计时间……

不过，我偶然发现了一些有趣的字体大小调整。在较大的字体大小（在我的测试中约为 22 像素，但这可能取决于多种因素）时，问题完全消失。

因此，我建议的修复是一种解决方法，但对于其他浏览器来说也应该是安全的。将字体大小加倍，但使用以下命令再次缩小transform：

.avatar {
  font-size: 30px;  /* double the size you wanted */
  ...
}

.avatar div {
  transform: scale(0.5);  /* reduce size by 50%, back to originally intended size */
}