Center items correctly when using justify-content: space-between - html

Question

I created a header bar and want to place 3 items there. The first should be aligned on the left side, the second in the middle of the header and the third on the right side.
I went for this
body{
background: #eeeeee;
}
#header {
background: #ffffff;
height: 53px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.headerEle {
}
<div id="header">
<img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
<a class="headerEle" href="https://www.google.de/">Google</a>
<button class="headerEle">Logout</button>
</div>
but when using justify-content: space-between; the items don't get centered correctly. The image takes a bigger place than the small button on the right.
So the link in the middle is not centered correctly, it overlaps the right side. I want the link being in the horizontal center of the page.

Answer 1

You can do something like this:
body {
background: #eee;
}
#header {
background: #fff;
height: 53px;
display: flex;
/*flex-direction: row; not necessary, by default*/
align-items: center;
justify-content: space-between;
}
#header > span {flex: 1} /* each 33.33% of the parent's width */
img {display: block; max-width: 100%; max-height: 100vh} /* responsiveness; "display: block" removes bottom margin/whitespace */
.link {
display: flex;
justify-content: center; /* horizontally centered */
}
.btn {
display: flex;
justify-content: flex-end; /* placed far right */
}
<div id="header">
<span>
<img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
</span>
<span class="link">
<a class="headerEle" href="https://www.google.de/">Google</a>
</span>
<span class="btn">
<button class="headerEle">Logout</button>
</span>
</div>

Answer 2

You can use absolute positioning for the <a> element to exactly center the link on the header:
body{
background: #eeeeee;
}
#header {
background: #ffffff;
height: 53px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position:relative;
}
#header a {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
<div id="header">
<img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
<a class="headerEle" href="https://www.google.de/">Google</a>
<button class="headerEle">Logout</button>
</div>

Answer 3

Is this what you are looking to do?
body{
background: #eeeeee;
}
#header {
background: #ffffff;
height: 53px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
#header > div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
text-align: center;
}
<div id="header">
<div>
<img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
</div>
<div>
<a class="headerEle" href="https://www.google.de/">Google</a>
</div>
<div>
<button class="headerEle">Logout</button>
</div>
</div>