在绝对 div 内水平居中表情符号答案

【问题标题】：Horizontally center emoji inside absolute div在绝对 div 内水平居中表情符号
【发布时间】：2019-03-10 07:41:12
【问题描述】：

我正在构建一个游戏，将表情符号放置在网页中的不同坐标处。有时，表情符号比它所在的容器大。例如，这里的 HTML 将一个字体大小为 100 像素的房子放在一个 50 像素的容器中。

    div.emoji-container {
        position: absolute;
        left: 200px;
        top: 200px;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    div.emoji {
        position: relative;
        font-size: 100px;
        line-height: 100px;
    }

    <div class="emoji-container">
    	<div class="emoji">&#x1F3E0;</div>
    </div>

这里是fiddle。

如您所见，表情符号不在红色方块的中心。

有没有一种方法可以使用 css 在其容器中水平居中表情符号，即使表情符号比容器宽？

换句话说，如果 emoji 的宽度是 100px，容器是 50px，那么 emoji 应该从它的容器两侧突出 25px。

部分挑战在于字体大小为 100 像素的表情符号在 Mac、Windows、Andriod 等设备上的宽度不同。在 Mac 上，宽度为 100px，但在 Windows 上，宽度约为 113px。

如果没有 css 解决方案，我知道我可以使用 JavaScript 解决方案。

【问题讨论】：

标签： html css emoji

【解决方案1】：

您可以为此使用 flexbox。为了演示，我为表情符号添加了透明度，以显示其中心位置。 CSS 顶部是 custom property，您可以更改它以测试不同的大小。

https://jsfiddle.net/uvf2h0sj/

对您来说重要的是，两个元素（父元素和子元素）都使用以下 CSS 将所有内容居中（垂直和水平）：

display: flex;
justify-content: center;
align-items: center;

:root {
  --size: 100px;
}

body {
  display: flex;
  height: 100vh;
  padding: 0;
  margin: 0;
  justify-content: center;
  align-items: center;
}

div.emoji-container {
  width: 50px;
  height: 50px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.emoji {
  font-size: var(--size);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="emoji-container">
  <div class="emoji">&#x1F3E0;</div>
</div>

【讨论】：