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

Question

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

    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 将表情符号在其容器内水平居中，即使表情符号比容器宽？

换句话说，如果表情符号的宽度为 100px，容器为 50px，则表情符号应从其容器两侧突出 25px。

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

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

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

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

Horizontally center emoji inside absolute div

html

css

emoji