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!
This article had a perfect opportunity to point out “why” flexbox solves our problems of centering: I will summarize…
Normal layout flow begins from left to right. When we want to move something, say
, then HTML lays out your element from the left of it’ parent container at an positive offset of 50 pixels.
Flexbox instead observes the total dimension of available space given by the container and the difference of dimensions any of it’s children have. For example: say we have a flexbox container that is 200px wide by 200px height, set to align center in both directions. The container has 1 child, 50px wide and a height of 50px. Flexbox takes the child’s width and subtracts it from the container’s width (200px – 50px = 150px). Flexbox then knows to offset it’s child by 150px to get perfect centering.
The point here is to understand that flexbox and for that matter, adaptive layout in general, deals with “available space”. Once you learn to design your layouts in this paradigm, you become an adaptive designer.