How do I horizontally center an emoji?

Question

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?

Non-Retina:

Retina:

This works on a retina screen, but is off a few px on a non-retina display:

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

Here is a CodePen to try things https://codepen.io/anon/pen/GmzoNP. You will need a retina and non-retina screen to observe the problem.

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:

• Text-align center (it is text after all)
• width: 0, 50% left margin, transform: translateX(-50%)...
• Changing character width
• Using a monospace font

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.

Greengrocery

Answer 1

I know it's a while since this question was asked but I've had the same problem and maybe my answer can help someone.

I could center the emoji by raising the font size to minimum size of 26px. With a minimum font size of 26px the emojis are centred on retina and not retina screens. In my final solution I raised the font size to 4em and then scaled it back down with transform: scale(0.25);.

Here are the experiments I made, which leaded me to my solution: https://codepen.io/faessler/pen/aRNOEY

If someone has a better/less dirty way, I would be happy to hear about it. :)

.fontSize span {
  display: inline-block;
  font-size: 26px;
}


/*BOX*/
.gridGroup {display:flex; margin-bottom:10px;}
.grid {position:relative; width:100px; height:50px; margin:0 10px 10px 0; border:1px solid blue; text-align:center;}
.grid:before {content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:100%; background:red;}

<div class="gridGroup">
  <div class="grid fontSize"><span>😃</span></div>
  <div class="grid fontSize">bla <span>😃</span> bla</div>
</div>

Klarrisa

Wow, thank you! I've been extremely frustrated trying to figure out why sometimes it's so hard to center emoji and never thought to check at different font sizes. This is so helpful. – Luehrmann

Answer 2

Here's a more semantic approach to it.

.emoji {
  display: flex;
  padding: 1rem;
  border: 1px solid black;
  position: relative;
}

.emoji::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: red;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%)
}

.align-center {
  /* vertically center. */
  align-items: center;
}

.justify-center {
  /* horizontally center. */
  justify-content: center;
}

<div class="emoji align-center justify-center">
  🚀
</div>

Faden

Answer 3

In my case, a width a little bit greater than the font-size solved the problem. The parent div was centring with flex.

div.emojiIcons {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

span.emoji {
  font-size: 24px;
  width: 26px;
}

Dimeter