⭕ 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, Firefox, Opera, and Chro-Safa-Edge indeed got onboard with vertical alignment.

But it was just until end of July 2024 when mobile browsers kicked in with Chrome for Android, Android Browser and Firefox for Android. The support isn’t still standard among all browsers:

But with 81.55% coverage of the users worldwide align-content in normal flow can be considered a viable alternative for display-flow variant.

The usage is easy, you just define one property:

To get that nice vertical alignment you dreamed of:

Maybe it’s not as revolutionary as landing on the Moon, but it’s 2024 and we have to take what we get. Actually using one property can be useful and I can’t wait for corporate environments to start aligning to use the new prop in their codebases. Hopefully that won’t take as much time as implementing the support in browsers :)

If you’d like to read coding news subscribe, follow, like, clap and share!