Flexbox vertical centering

by Nadeesh Peiris

HTML

<div class="container">
  <div class="flex-item">
   <div class="flex-item-inner">
     I am centered!
    </div>
  </div>
</div>

CSS

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

.flex-item {
  background-color: white;
  max-height: 100%;
  overflow: auto;
}

.flex-item-inner {
  background-color: red;
  width: 200px;
  height: 300px;
}