Flexbox does not vertically center div inside table cell

Question

Why is the red div not centered vertically? My pen: http://codepen.io/helloworld/pen/aWWgBK?editors=1000 ```

selected	Name
	this text should be vertically aligned in the center of the table cell		item 1 item 2 item 3 item 4 item 5 item 6

```

Accepted Answer

When you change the `display` value of a table cell from `table-cell` to `flex`, it appears to mess up the table algorithm.

But to vertically center the content of a table-cell, you just need `vertical-align: middle`. (It's one of those rare instances when this stubborn property actually works – on table-cell and inline elements.)

http://codepen.io/anon/pen/wddVPy?editors=1000

Flexbox does not vertically center div inside table cell

Solution

Problem