title: How do I horizontally center an emoji?
body: <p>It appears that a unicode emoji character overflows it's bounding box on a non-retina display, but it remains within the character bounds on a retina display.  So how do I horizontally center an emoji in a div on both a retina and a non-retina display?</p>
  
  <p>Non-Retina:</p>
  
  <p><a href="https://i.stack.imgur.com/p85Jt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/p85Jt.png" alt="enter image description here"></a></p>
  
  <p>Retina:</p>
  
  <p><a href="https://i.stack.imgur.com/if3m4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/if3m4.png" alt="enter image description here"></a></p>
  
  <p>This works on a retina screen, but is off a few px on a non-retina display:</p>
  
  <pre><code>&lt;div style="text-align: center; width: 3rem; border: 1px solid red;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is a CodePen to try things <a href="https://codepen.io/anon/pen/GmzoNP" rel="noreferrer">https://codepen.io/anon/pen/GmzoNP</a>.  You will need a retina and non-retina screen to observe the problem.</p>
  
  <p>Here are some of my ideas that I tried.  I have not had success with them yet but I think the last two are on the right track:</p>
  
  <ul>
  <li>Text-align center (it is text after all)</li>
  <li>width: 0, 50% left margin, transform: translateX(-50%)...</li>
  <li>Changing character width</li>
  <li>Using a monospace font</li>
  </ul>
  
  <p>A little context about how others have solved this problem - Slack and Google both just use images of emojis.  This is not ideal in my case because it increases bundle size and and requires some extra logic to handle copy/paste.</p>