Vertically Centering with Flexbox
Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be. We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly inefficient -- yet it seemed that tables were the easiest and most reliable way to make vertical centering happen. When the vertical-align CSS property was introduced, I was incredibly excited, but quickly found that it didn't usually do what I wanted it to.
After playing with flexbox for the DevTools Debugger I've found that align-items: center; is the hero I've always needed.
Let's consider the following HTML markup which features contents of varying heights:
<div class="parent"> <div>Hello!</div> <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p></div> <div><img src="https://davidwalsh.name/wp-content/themes/punky/images/logo.png" style="display: inline;"></div> </div>
If we want each elements' contents to be vertically centered, we can use flexbox and align-items to make that happen:
.parent {
display: flex;
align-items: center;
}
Flexbox was always promised to be the savior of web layout but appears to have flamed out a bit in favor of CSS grid; I'm just happy that flexbox fixed the vertical alignment issue that caused us all nightmares for so long!
All of us who have designed websites have often struggled with centering items, as you correctly put it. I started with tables but with the advent of web 2.0, it went out of favor and use of CSS became more prevalent but it was tough. I hope this flexbox is the perfect solution I was always searching for. Many thanks!
Great and concise article, thank you. Really enjoy your blog posts. Just a small typo I think…
Shouldn’t this….
.parent { display: flex; align-items: center; }be this ?
.demo-content-parent{ display: flex; align-items: center; }Why so? The container has a class of “parent”…
Hi David
I wouldn’t say that Flexbox has ‘flamed out a bit in favor of CSS grid’. They can both be used together – in fact I’d say Flexbox, and especially this vertical centering technique, complements CSS Grid.
It’s really incredible and disappointing that it took so long for a satisfactory vertical alignment method to come along, but it’s better late than never!
As for Flexbox vs Grid, I agree with Andrew. Perhaps there was initially a degree of extra excitement around Flexbox that it was going to help solve problems that it actually wasn’t designed or ideally suited for but for which it was still the new best tool, before Grid came along. But Flexbox is now left as being a solid choice for defining 1-dimensional sections of layout (albeit sometimes with multiple rows), and Grid as the solution for 2D layouts, the final proper CSS replacement for using HTML tables for visual layout.
I completely agree that flexbox comes in clutch, very often, and building on what Andrew mentioned can be used wonderfully together!