I'm trying to center the CONTENTS of a flexbox item while using `justify-content:stretch;` It appears that the old trick of using `display:table-cell;vertical-align:middle;` doesn't work in this situation. What does?

```
.flex-container {
    display:flex;
    align-items:center;
    justify-content:stretch;
}
.flex-item {
    align-self:stretch;
}

<div class="flex-container">
    <div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>

```

**BEFORE YOU ANSWER:** There seems to be a lot confusion about what I'm asking. I'm trying to center the **CONTENTS** of the flex-item. With `justify-content:stretch`, the height of the item will stretch to the full height of the container, but **the contents** of the item floats to the top (at least in Chrome).

"A picture is worth a thousand words." (A) is what I've already got. (B) is what I want.
![enter image description here](https://i.stack.imgur.com/ZffJt.jpg)