Untitled

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="wrapper d-flex flex-column align-items-center justify-content-center">
      <div class="top col-auto">Top Element</div>
      <div class="middle col-auto">Middle Element</div>
      <div class="bottom col-auto">Bottom Element</div>
    </div>
  </body>

</html>

// Code goes here

/* Styles go here */

.wrapper {
  height: 100vh;
}

.top {
  width: 40%;
  height: 50px;
  background-color: green;
}

.middle {
  width: 90%;
  height: 300px;
  background-color: blue;
  margin-top: 30px;
  margin-bottom: 30px;
}

.bottom {
  width: 20%;
  height: 50px;
  background-color: red;
}