Vertically Centering with Flexbox

By  on  

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!

Recent Features

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    Duplicate DeSandro&#8217;s CSS Effect

    I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate:  use some simple JavaScript goodness to inject unicorns into their page.

  • By
    MooTools, mediaboxAdvanced, and Mexico

    The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...

Discussion

  1. 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!

  2. Simon

    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;
    }
    
  3. 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.

  4. Ben C

    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.

  5. I completely agree that flexbox comes in clutch, very often, and building on what Andrew mentioned can be used wonderfully together!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!