Vertically centering sibling child contents is a task we’ve long needed on the web, yet it has always seemed way more difficult than it should be. When I first started my CSS journey, I remember relying on tables to accomplish this task. While tables were easy and reliable for vertical centering, they were horribly inefficient for layout purposes. As I progressed, I moved on to various CSS and JavaScript tricks, but many of those methods left me frustrated.
When the vertical-align CSS property was introduced, I was incredibly excited. However, I quickly found that it rarely did what I wanted, leaving me feeling stuck again.
After playing with Flexbox in the DevTools Debugger, I discovered that align-items: center; is the hero I’ve always needed. This simple property makes vertical centering straightforward and effective.
If we want each element’s contents to be vertically centered, we can use Flexbox and the align-items property to achieve that:
Flexbox was always promised to be the savior of web layout, but it seems to have flamed out a bit in favor of CSS Grid.
