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
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    Create Classy Inputs Using MooTools&#8217; OverText

    The MooTools More library is a goldmine. A treasure chest. Pirates booty, if you will (and, of course, I will). More is full of plugins that add a lot of class and functionality to your website with minimal effort.

  • By
    CSS Fixed Positioning

    When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need. The CSS Above we set our element 2% from both the top and right hand side of 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.

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