How to vertically align text inside a flexbox?

Question

I would like to use flexbox to vertically align some content inside an

but not having great success.

I\'ve checked online and many of the tut

Answer 1

You could change the ul and li displays to table and table-cell. Then, vertical-align would work for you:

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK