Vertically centering with flexbox

Question

I'm trying to center a div on a webpage using flexbox. I'm setting the following CSS properties. I see that it's being centered horizontally, but not vertically.

.flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

Here's the fiddle: JSFIDDLE

Can you explain what I'm doing wrong?

do you know `flex` doesn't support legacy browser mostly i.e — Shehary, Aug 30 '15 at 21:15
@Shehary For completeness, here is a [flexbox support table](http://caniuse.com/#feat=flexbox). IE10 and below only have partial support. — Maximillian Laumeister, Aug 30 '15 at 21:20
@MaximillianLaumeister, thanks, I know and I said mostly i.e, should have write in caps IE :) and out of 2.8biliion computer users (2014 stats) if 67million even move to windows 10 doesn't make `flex` a good choice — Shehary, Aug 30 '15 at 21:25
Hi Zack, if you feel your question has been answered, please don't forget to mark some answers as "helpful" using the arrows, and one of them as "accepted" by clicking the gray checkmark to the left of the answer. If your question hasn't been fully answered, please elaborate so we can further help! Thanks! — Maximillian Laumeister, Sep 01 '15 at 19:22
Thanks, Maximillian, for the reminder. I was unable to select an answer last I was here because I hadn't waited long enough. :-) — Zack, Sep 02 '15 at 20:09

score 5 · Accepted Answer · answered Aug 30 '15 at 21:23

5

A <div> element without an explicit height defaults to the height of it's contents, as all block elements do. You'd probably want to set it to 100% of it's parent, the <body>, but that's not enough, since that is also a block element. So again, you need to set that to 100% height, to match it's parent, the <html>. And yet again, 100% is still required.

But once all that is done, you get that annoying vertical scroll bar. That's a result of the default margin the body has, and the way the box model is defined. You have several ways you can combat that, but the easiest is to set your margins to 0.

See corrected fiddle.

html, body {
  height: 100%;
  margin: 0px;
}

.flex-container {
 display: flex;
 align-items: center;
    justify-content: center;
    height: 100%;
}

.item {
    background-color: blue;
    height: 50px; 
    width: 50px;
}

<div class="flex-container">
    <div class="item">
    </div>
</div>

answered Aug 30 '15 at 21:23

Amit

45,440
9
78
110

Thanks, @Amit. So if another parent `div` is added, do I need to add 100% there too? I essentially need to add height 100% all the way down the tree? – Zack Aug 30 '15 at 21:27
All through any `display: block` element, but if you want to generate an element that takes 100% width & 100% height, you'd probably not want it nested anyway – Amit Aug 30 '15 at 21:28
@Zack, Amit provides a good explanation of the problem and the fix. If you want to deepen your understanding of the `height` property with percentage values, you can read my answer here: http://stackoverflow.com/questions/31728022/why-is-the-height-property-with-percentage-value-not-working-on-my-div/31728799#31728799 – Michael Benjamin Aug 30 '15 at 21:48

score 3 · Answer 2 · answered Aug 30 '15 at 21:16

You just need to set html, body, and your flex container to height: 100%. The reason it wasn't working is that your flex container didn't have an explicit height set, so it defaulted to the height of its contents.

Live Demo:

html, body {
    height: 100%;
}

.flex-container {
 display: flex;
 align-items: center;
    justify-content: center;
    height: 100%;
}

.item {
    background-color: blue;
    height: 50px; 
    width: 50px;
}

<div class="flex-container">
    <div class="item">
    </div>
</div>

JSFiddle Version: http://jsfiddle.net/d4vkq3s7/3/

Thank you so much! I tried setting height:100% to the container but it still didn't work. Looks like it was the html, body height I was missing. — Zack, Aug 30 '15 at 21:19

Vertically centering with flexbox

2 Answers2