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
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Create Your Own Dijit CSS Theme with LESS CSS

    The Dojo Toolkit seems to just get better and better.  One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes.  The move to using LESS is a brilliant one because it makes creating your own Dijit theme...

  • By
    MooTools onLoad SmoothScrolling

    SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable. The MooTools / PHP Of course, this is a...

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;
    }
    
    • Francisco Blanchart

      Why so? The container has a class of “parent”…

  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!