Flexbox Vertical Center - Solution

by Dan

HTML

<section id="container">

  <div class="buttonsSection">
    <a class="button" href="#">
      <p>Very Long Word aaaa xx ccc ddd ee</p>
    </a>
  </div>

  <div class="buttonsSection">
    <a class="button" href="#">
      <p>Short Phrase</p>
    </a>
  </div>

</section>

CSS

#container {
  display: flex;
  height: 500px;
}

.button {
  height: 100%;
  background-color: deepskyblue;
  margin: auto 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.button p {
  height: 25%;
  text-align: top;
  color: white;
  background-color: green;
}

.buttonsSection {
  margin: auto 3px;
  height: 100%;
  width: 150px;
  background-color: red;
}