The Fundamentals of CSS Alignment

September 19, 2025

Diagram of a CSS flex container with five labeled flex items arranged across two flex lines, illustrating the concepts of flex container, flex lines (highlighted with orange diagonal stripes), and flex items with dashed arrows pointing to each label.

While centering elements in CSS has become easy over time, there is still a lot of confusion around alignment in general. Let’s be honest, you always end up trying different combinations until it works, but you don’t really understand how it works, right?Which property is for vertical alignment? align-content or align-items? Where should I add display: flex? Let’s add it everywhere! A height? Why do I need to define a height!? Maybe I should try with display: grid?

It’s time to clear all the confusion! Through this exploration, you will understand the logic behind all the alignment properties and how they work in each layout. It’s not another article about centering, we are going beyond!

Source: The Fundamentals of CSS Alignment

It feels like we published at least a couple of things along these lines in recent weeks. But I feel too, you can never have too much reinforcement of some of these foundational concepts.

So one more time for the folks at the back, here’s how we can align content in modern CSS layouts natively. It finishes with a quiz.