Vertical align flex

In this example below you will see how to do a Vertical align flex with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -a, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -a ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Vertical align flex</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="column vertical-centering">
  <div class="element">
    <span>Element 1</span>
  </div>
  <div class="element">
    <span>Element 2</span>
  </div>
  <div class="element">
    <span>Element 3</span>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-a/vertical-align-flex-LbqjKm */
.column {
  border: solid 3px tan;
  height: 300px;
}
.element {
  outline: solid 1px gray;
  background-color: lightgray;
  margin: 5px;
  padding: 5px;
}
.vertical-centering {
  display: flex;
  flex-direction: column;
  justify-content: center;  
}

Comments