How to visually horizontally center an emoji in Chrome?

This appears to be an old Chromium rendering bug that specifically affects Retina devices. That might explain why some other posters are suggesting solutions that don't work for you!

See the bug report here: https://bugs.chromium.org/p/chromium/issues/detail?id=551420. There's no ETA on a fix, of course...

I have stumbled across something interesting playing around with font sizes though. At larger font sizes (approx 22px in my testing, but this might be dependent on a variety of factors), the problem goes away entirely.

Therefore, my suggested fix is a bit of a workaround, but should be safe for other browsers too. Double the font size, but scale it down again using 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 */
}