display: table method of vertical alignment

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="subcontainer">
        <div class="parent">
          <p class="child">Hello World!</p>
        </div>  
      </div>
    </div>
  </body>

</html>

.container {
  width: 100%;
  height: 300px;
  display: table;
  border: 1px dashed navy;
  border-radius: 15px;
}

.subcontainer {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

.parent {
  width: 200px;
  height: 200px;
  margin: auto;
  background-color: orange;
  border-radius: 15px;
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
  font-size: 22px;
  font-family: Arial;
  color: white;
  text-align: center;
}