如何将表情符号水平居中？

似乎unicode表情符号字符在非视网膜显示器上溢出它的边界框,但它仍然在视网膜显示器上的字符边界内.那么如何在视网膜和非视网膜显示器上以水平方式将表情符号居中放置？

非视网膜:

视网膜:

这适用于视网膜屏幕,但在非视网膜显示屏上偏离了几个px:

这是一个CodePen来尝试https://codepen.io/anon/pen/GmzoNP.你需要一个视网膜和非视网膜屏幕来观察问题.

以下是我尝试过的一些想法.我还没有成功,但我认为最后两个是在正确的轨道上:

文字对齐中心(毕竟是文字)

宽度:0,左边距50%,变换:translateX(-50%)...

改变字符宽度

使用等宽字体

关于其他人如何解决这个问题的一些背景 - Slack和Google都只使用了表情符号的图像.这在我的情况下并不理想,因为它增加了包大小,并且需要一些额外的逻辑来处理复制/粘贴.