Center stage: positioning in the middle

Centering something horizontally and vertically has long been a challenge in CSS. The best CSS-only solution we have is position:absolute; left: 50%; top: 50%; paired with negative left/top margins that equal half of the width/height. And that only flies with explicitly sized elements. Ugh! With flexbox we can get there a touch easier:

We don’t set box-flex on the child because we don’t want it using extra space. We just want it to be in the middle, regardless of it’s size. The huge advantage is here, that we don’t need to have explicit dimensions in order to center it. We could be doing this with something that’s typically block or inline. It just works.