full center modal

center.css

.outer {
  position: fixed;
  top: calc(50% - 300px / 2);
  background: red;
  width: 300px;
  display: flex;
  height: 300px;
  left: calc(50% - 300px / 2);
  z-index: 10;
  vertical-align: middle;
  text-align: center;
  border: 5px solid green;
}
.outer .inner {
  margin: auto;
  color: blue;
  font-size: 3em;
}

<div class="outer">
  <div class="inner">
    Hello World
  </div>
</div>