<div class="box">
  <div class="modal"></div>
</div>

.modal {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 50%;
  height: 50%;
  background: deeppink;
  margin: auto;
}

.box {
  /*  uncomment this line to put the pink box inside  */
  /*   position: relative; */
  width: 400px;
  height: 400px;
  background: blue;
}