How to vertically align text inside a flexbox?

Question

I would like to use flexbox to vertically align some content inside a <li> but not having great success.

I've checked online and many of the tutorials actually use a wrapper div which gets the align-items: center from the flex settings on the parent, but I'm wondering is it possible to cut out this additional element?

I've opted to use flexbox in this instance as the list item height will be a dynamic %.

* {

  padding: 0;

  margin: 0;

}

html, body {

  height: 100%;

}

ul {

  height: 100%;

}

li {

  display: flex;

  justify-content: center;

  align-self: center;

  background: silver;

  width: 100%;

  height: 20%;

}

<ul>

  <li>This is the text</li>

</ul>

Answer 1

If you want to make the flex-direction vertical (using column) then justify-content: center which will center it vertically. Now, you can just use the text-align: center to center horizontally as well like this:

li {

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

}

Have a look at this demo:

https://codepen.io/anon/pen/Fkhgo