Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

CSS Vertical Center with Flexbox

By  on  

I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily solve a problem CSS has had for far too long:  CSS vertical centering.  Let me show you how easy it is!

View Demo

Vertical centering requires a parent and children elements...

<div class="flexbox-container">
	<div>Blah blah</div>
	<div>Blah blah blah blah blah ...</div>
</div>

...but only the parent element needs CSS properties set for the vertical centering of child elements:

.flexbox-container {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: center;
}

Aside from the vendor prefixes, that is some simple CSS!  Vertical centering without flexbox is hopeful at best so it's encouraging that the future of CSS layouts will make this task easy.  I'm still not sold on flexbox solving all of the web world's layout problems but solving vertical centering is quite an asset.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

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

Incredible Demos

  • By
    Create a Simple News Scroller Using MooTools, Part I: The Basics

    News scroller have been around forever on the internet. Why? Because they're usually classy and effective. Over the next few weeks, we'll be taking a simple scroller and making it into a flexible, portable class. We have to crawl before we...

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

Discussion

  1. cbloss793

    Two words: Mind blown!

    I was just saying that despite being a developer for many years now, I still find it hard to vertical align anything. It shouldn’t be that hard!!! I’m looking forward to trying this out!

    Thanks!

  2. Senff

    I’m still a bit confused about the behavior of the children (if one of them has a fixed width but the other one doesn’t, then the width of the first one isn’t really properly applied for example), but I haven’t looked into the whole flexbox thing enough so I’m sure that’s normal. Regardless, this example is already quite helpful for a bunch of situations.

  3. Pete

    Remind me, what versions of IE is this (flex-box) supported back to? Thanks

  4. Pete

    Answered my own question. Looks like it is only supported back to IE10 and even their it is partially supported using the -ms- prefix.

  5. Sean

    I don’t see any mentions of the browser support. After a quick test, it works in Firefox, Chrome, and IE10+.

  6. Marco

    Great post… regarding flexbox maybe this can help you:
    http://codepen.io/hicTech/pen/emvMBw

  7. Douwe

    Have been waiting for this for years! No more margin-top or padding nightmares! Thanks.

  8. undercover css cop
    .container { 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}
  9. rud

    i’m not a big fan of position: absolute; and transform(3d): translateY();
    some browsers still support transform(3d) poorly..
    i’m sticking to dispay: table; and display: table-cell; for now..
    so i sure hope flexbox will become an adopted standard.. fast..

  10. Jordan Dobson

    Yeah I would avoide translate3d positioning… some browsers put your elements on a half pixel rendering your UI blurry… mainly because the way translated elements are painted to screen is different. :(

  11. Ali

    Do the elements in HTML have to be in DIVs? Can’t they be in HTML5 articles?

  12. emerson

    vertical align in flexbox is somewhat complicated because there are two modes for vertical-align, one for in-line vertical align and the other for in-container vertical-align.

    check the “Cross Align” and “Multi Align” panel in this flexbox generator to see the effect:
    http://loading.io/flexbox/

  13. meg

    The odd thing for me is that when I copy and paste the html and css into an editor and launch the file it’s not working. Am I missing something?

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