Align Middle Div to Center

Hey 👋,

recently I was working on Numynums and wanted to align three div to the center of the page in a very specific way.

Example of three divs aligned to the center.

As you can see above, the = symbol is exactly in the middle of the page. And the other two, are to the left and right of the = symbol.

It took longer than I expected, and I learnt something new so.. here it is for future reference:

<div class="wrapper">
    <div class="left">left</div>
    <div>=</div>
    <div class="right">not-left</div>
</div>

My first try was display: flex and justify-content: center with left and right with flex-grow: 1 but it didn’t work because the combinantion of the three divs was aligned to the center, but that didn’t mean the center div was exactly at the center.

The solution was using flex-basis: 0 in combination of flex-grow: 1.

Until this moment I didn’t know what flex-basis did so this was a good learning experience.

The final css was:

.wrapper {
    display: flex;
}
.left {
    flex-basis: 0;
    flex-grow: 1;
    text-align: right;
}
.right {
    flex-basis: 0;
    flex-grow: 1;
    text-align: left;
}

Hopefully this is helpful to future me and maybe someone else! 🚀