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

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    Duplicate the jQuery Homepage Tooltips Using MooTools

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using MooTools. The XHTML The above XHTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

  • By
    Degradable SELECT onChange

    Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function...

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!