How can I focus horizontally on emoji?

It looks like the unoode emoji character overflows its bounding box on the non-retina display, but it stays within the characters on the retina screen. So how do I horizontally center emoji in a div on both retina and non-retina screen?

Non-Retina:

Retina:

This works on the retina screen, but from a few pixels on the display, not the retina:

<div style="text-align: center; width: 3rem; border: 1px solid red;">😃</div>

      

        
        
        
      

    

Here's a CodePen to try things out https://codepen.io/anon/pen/GmzoNP . You will need a retina and a retinal mesh to observe the problem.

Here are some of my ideas I've tried. I haven't had any success yet, but I think the last two are on the right track:

• Center of text alignment (this is the text at the end)
• width: 0.50% left margin, transform: translateX (-50%) ...
• Changing the width of characters
• Using a monospaced font

A little context on how others have solved this problem - Slack and Google both use emojis images. This is not ideal for my case because it increases the package size and requires additional copy / paste logic.