html - 如何在 Chrome 中将表情符号视觉水平居中？

Question

在 Google Chrome 中，在视觉上将表情符号水平居中是非常困难的，因为表情符号右侧似乎有不应该有的空白。一个例子:

.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 */
}