How to vertically align text inside a flexbox?

I would like to use flexbox to vertically align some content inside an <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>