Vertical align flex

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

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
Copyright -a ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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



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



/*Downloaded from */
.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;