.box {

  margin: 100px;

  width: 500px;

  height: 500px;

  background: #eee;

  text-align: center; /*center*/

}

.box::after {

  content: '';

  display: inline-block;

  width: 0;

  height: 100%;

  vertical-align: middle;

}

​

.center {

  display: inline-block;

  background: #0ff;

  width: 100px;

  height: 100px;

  vertical-align: middle;/*center*/

}