Vertically Align With Flexbox

Using flexbox allows you to make flexible responsive layouts without floats or positioning. Note that Flexbox isn’t supported by IE9 or earlier.

<div class="align-vertically">
  Vertically centered
</div>

The corresponding CSS:

.align-vertically {
  background: #13b5ea;
  color: #fff;
  display: flex;
  align-items: center;
  height: 200px;
}

Read more about align-items on Mozilla. Read more about using flexbox with vertically align items here. This is a nice visualizer of flexbox and how different properties affect the layout.

Instagram Post