Flexbox vertical centering

by duckduck0054

HTML

<div class="container">
  <div class="flex-item1">
   <p>
   I am centered!
   </p>
  </div>
  <div class="flex-item2">
   <p>
   I am centered!
   </p>
  </div>
  <div class="flex-item3">
   <p>
   I am centered!
   </p>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* align-items: center; */
  background-color: black;
  height: 400px;
}

.flex-item1 {
  flex: 1;
  background-color: white;
  margin: 5px;
  padding: 10px;
}

.flex-item2 {
  flex: 1;
  background-color: white;
  margin: 5px;
  padding: 10px;
}
.flex-item3 {
  flex: 2;
  background-color: white;
  margin: 5px;
  padding: 10px;
}