Flexbox Vertical Center - Solution

HTML

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

CSS

.button {
    padding:15px;
    width: 150px;
    background-color: deepskyblue;
    color: white;
    margin: 3px;
   display:flex;
   flex-direction:column;
   justify-content:center;
   height:100%;
}
.button a{
  height:80%;
  color:white;
}

.buttonsSection {
    margin: 30px 0;
    display: flex;
    height: 500px;
    
}

body
{
    width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
    margin: 0 auto;
}