Um ein Element in einem anderen Element zu horizontal zu zentrieren kann man, sofern man die Breite angeben kann, margin: 0 auto; oder margin: auto; verwenden.

Um das Element horizontal zu zentrieren wird schon schwieriger.

Noch schwieriger wird es wenn die Breite und oder die Höhe dynamisch ist. 

Mit einem Ghost:before Element fuktioniert das perfekt:

/* This parent can be any width and height */
.parent {
  text-align: center;
  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
/* The ghost, 4 perfect centering */
.parent:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
  display: inline-block;
  vertical-align: middle;
  /* width: 300px; */
}