Horizontally center emoji inside absolute div - html

Question

I am building a game that places emoji at various coordinates in a webpage. Sometimes, the emoji is bigger than the container it resides in. For example, here is HTML that places a house with font-size 100px inside a 50px container.
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">🏠</div>
</div>
Here is the fiddle.
As you can see, the emoji is not centered on the red square.
Is there a way that I can use css to horizontally center the emoji within its container, even if the emoji is wider than the container?
In other words, if the width of the emoji is 100px and the container is 50px, then the emoji should protrude from its container by 25px on both sides.
Part of the challenge is that emoji with font size 100px has a different width on Mac, Windows, Andriod, and so on. On Mac, the width is 100px, but on Windows, the width is around 113px.
If there is no css solution, I know that I can use a JavaScript solution.

Answer 1

You can use flexbox for this. For demonstration i have added a transparence to the emoji, to show its center position. On top of the CSS is a custom property which you can change to test different sizes.
https://jsfiddle.net/uvf2h0sj/
Important for you is that both elements (parent and child) using the following CSS to center everything (vertical and horizontal):
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">🏠</div>
</div>