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](http://jsfiddle.net/d4vkq3s7/2/)

Can you explain what I'm doing wrong?