The good old margin: auto with flexbox

Combined with flexbox, margin: auto can center a flex item horizontally and vertically very easily.

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 300px;
  height: 200px;
  background: #ccc;
  display: flex;
}

.child {
  width: 50px;
  height: 50px;
  background: #000;
  margin: auto;
}