<div class="outer-box">
  <div class="inner-box">
  </div><!-- .inner-box -->
</div><!-- .outer-box -->
.outer-box {
  width: 300px;
  height: 300px;
  background: black;
  box-sizing: border-box;
  /* Posicionamiento con tablas */
  display: table;
  /* Con este border-spacing simulamos el tamaño de 150x150px que queremos que tenga el elemento interior. */
  border-spacing: 75px;
}
.inner-box {
  /* Podríamos quitar las reglas width y height ya que da igual el tamaño de los elementos dentro de una tabla porque van a ocupar todo el espacio disponible. */
  width: 150px;
  height: 150px;
  background: red;
  /* Posicionamiento con tablas */
  display: table-cell;
}
Rerun