title: Best way to align vertically <div> with different flex directions?
body: <p>I several 'div' in my 'body' and
  I'd like to vertically center the items inside those 'div' but some of them has column as flex-direction.</p>
  <pre><code>body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }
  
  body div{
      flex: 1;
  }
  .header {
      display: flex;
      justify-content: space-between;
      background-color: RGB(230, 230, 230);
      align-items: center;
  }
  
  .header ul {
      display: flex;
      list-style-type: none;
      gap: 10px;
      margin: 0px;
      padding: 0px;
  }
  
  .description {
      background-color: RGB(200, 200, 200);
      display: flex;
      align-items: center;
  }
  
  .img {
      max-width: 500px;
      height: auto;
  }
  
  .information {
      display: flex;
      flex-direction: column;
      background-color: RGB(170, 170, 170);
      align-items: center;
  }
  
  .information .card {
      display: flex;
  }
  
  .quotes {
      display: flex;
      flex-direction: column;
      background-color: RGB(130, 130, 130);
      align-items: center;
  }
  
  .signup {
      display: flex;
      background-color: RGB(100, 100, 100);
      align-items: center;
  }
  
  .footer {
      display: flex;
      background-color: RGB(70, 70, 70);
      align-items: center;
  }
  </code></pre>
  <p>what would be the best way to align vertically the items inside those 'div'?
  Should I just individually do that or is there any better way to do so?</p>