⭕ CSS Now Supports Vertical Alignment In Normal Flow

At last, after so many years we can center stuff vertically with one CSS property!

CSS of course supports vertical alignment for many many years. It can be done in various ways. You can for example set margin to auto both for top and bottom margin. That way stuff will center.

Another way involves position: absolute, top 50% and transform: translate(0, — 50%). You can also set position absolute to 50% and use margin to move the element to up, so it’s centered.

But these and other methods are just hacks. Let’s be honest, it’s not how we should do it, if we can use a normal method.

In fact for many years a normal method is available and it’s:

display: flex;
align-items: center;

With these two properties your element is centered vertically.

The drawback of it is however, that we have to change the flow from normal to flex. Why we had to do it? The thing is that for many years not all browsers supported the same concept in normal flow, so this:

align-content: center; #notice the name!

Didn’t work everywhere. Desktop browsers were faster to support it, and in March 2024 majority of them, like Brave…