Flexbox Layout Justify Content [duplicate] - html

Question

This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
It seems such a simple scenario in my head.
I have a container div that has two child elements, the first of which should appear in the top left corner, and the second should appear dead central.
I've tried to use space-between when using the the justify-content property of Flex on the container.
This splits the content into the top-left and top-right corners.
The element in the top-right corner needs to pull-left until it is dead central.
I can't think of a way to achieve this.
I don't want to make a third hidden element, as that seems like a hack.
#container {
display: flex;
justify-content: space-between;
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>

Answer 1

Just add width: 50%; to the container and you are good to go
#container {
display: flex;
justify-content: space-between;
width: 50%;
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>
And if you want the second item to be exactly in the center add transform:translateX(50%);, this will move it according to its width
#container{
display:flex;
justify-content: space-between;
width: 50%;
}
#container div:nth-child(2){
transform:translateX(50%);
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>