如何水平居中表情符号？答案

【问题标题】：How do I horizontally center an emoji?如何水平居中表情符号？
【发布时间】：2017-05-23 18:30:10
【问题描述】：

在非视网膜显示器上，Unicode 表情符号字符似乎溢出了它的边界框，但它仍然在视网膜显示器上的字符边界内。那么如何在视网膜和非视网膜显示器上将 div 中的表情符号水平居中？

非视网膜：

视网膜：

这适用于视网膜屏幕，但在非视网膜显示器上会偏离几个像素：

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

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

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

文本居中对齐（毕竟是文本）
宽度：0，左边距 50%，变换：translateX(-50%)...
更改字符宽度
使用等宽字体

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

【问题讨论】：

标签： css emoji

【解决方案1】：

我知道这个问题被问到已经有一段时间了，但我遇到了同样的问题，也许我的回答可以帮助别人。

我可以通过将字体大小提高到 26 像素的最小大小来使表情符号居中。最小字体大小为26px 时，表情符号以视网膜而不是视网膜屏幕为中心。在我的最终解决方案中，我将字体大小提高到 4em，然后使用 transform: scale(0.25); 将其缩小。

以下是我所做的实验，这些实验引导我找到了我的解决方案：https://codepen.io/faessler/pen/aRNOEY

如果有人有更好/不那么肮脏的方式，我很乐意听到。 :)

.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>

【讨论】：

哇，谢谢！我一直非常沮丧地试图弄清楚为什么有时很难将表情符号居中并且从未想过要检查不同的字体大小。这很有帮助。

【解决方案2】：

在我的例子中，width 比 font-size 大一点解决了这个问题。父 div 以 flex 为中心。

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

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

【讨论】：

【解决方案3】：

这是一种更语义化的方法。

.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>

【讨论】：