Question

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

.accordion .title > .arrow-button .arrow
{
    -fx-translate-x: 20;
}

    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;
    }

这里是fiddle。

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

即使表情符号比容器宽，我是否可以使用css将表情符号水平居中放置在容器中？

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

挑战的一部分是字体大小为100px的表情符号在Mac，Windows，Andriod等上的宽度不同。在Mac上，宽度为100像素，但在Windows上，宽度为113像素左右。

如果没有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内水平居中表情符号

1 个答案: