CSS - Center Child Elements Vertically

SOURCE

You can use Flex Layout (example), so something like:

<div fxLayout="row" fxLayoutAlign="center center" >

Or use these two:

Modern solution (transform)

Since transforms are fairly well supported now there is an easier way to do it.

<div class="cn">
  <div class="inner">your content</div>
</div>

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Modern solution (flexbox)

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}