The Fundamentals of CSS Alignment

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