SOURCE

<div class="bg-gray parent table-cell text-center text-middle">
  <div class="inline-block border-primary">child</div>
</div>
<div class="parent position-relative bg-gray">
  <div class="position-absolute align-center-transform border-primary">child</div>
</div>
<div class="parent bg-gray flex align-center-flex">
  <div class="border-primary">child</div>
</div>

.bg-gray{
  background: gray;
}
.table-cell{
  display: table-cell;
}
.text-center{
  text-align: center;
}
.text-middle{
  vertical-align: middle;
}
.inline-block{
  display: inline-block;
}
.border-primary{
  border:1px solid #fff;
}
.position-absolute{
  position: absolute;
}
.position-relative{
  position: relative;
}
.align-center-transform{
  top: 50%;left: 50%;
  transform: translate(-50%,-50%);
}
.flex{
  display:flex
}
.align-center-flex{
  justify-content: center;
  align-items: center;
}
div.parent{
  width: 400px;
  height: 200px;
  margin-top: 20px;
}