Untitled

<!DOCTYPE html>
<html>

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

  <body>
    <div class="container"> 
      <div class="top">
      </div>
      <div class="center">
      </div>
      <div class="bottom">
      </div>
    </div>
  </body>

</html>

// Code goes here

body{
  height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:lightgrey;
}

.container{
  display:flex;
  flex-direction:column;
  height: 500px;
}

.top{
  background:CornflowerBlue;
  flex: 0 0 100px;
}

.center{
  flex:1 1 auto;
  margin:40px 0;
  background:salmon;
}

.bottom{
  flex: 0 0 100px;
  background:MediumSeaGreen ;
}