CSS Flexbox vertical align.

<!DOCTYPE html>
<html>

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

  <body>
    <div class="container">
      <div class="parent">
        <p class="child">
          Foo
        </p>
      </div>
      <div class="parent">
        <p class="child">
          Bar
        </p>
      </div>
      <div class="parent">
        <p class="child">
          Baz
        </p>
      </div>
    </div>
  </body>

</html>

.container {
  width: 100%;
  height: 300px;
  border: 1px dashed navy;
  display: flex;
}

.parent {
  width: 150px;
  height: 150px;
  background-color: red;
  border-radius: 15px;
  margin: auto;
  display: flex;
}

.child {
  font-family: Arial;
  color: white;
  font-size: 22px;
  margin: auto;
}