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

RESULT

HTML

  
This is the text
  
This is another text
  
This is another another text

---

Use align-items instead of align-self and I also added flex-direction to column.

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}