Flexbox Vertical Center - Solution

HTML

<section class="buttonsSection">
    <a class="button" href="#">Very Long Word</a>
    <a class="button" href="#">Short Phrase</a>
     <a class="button" href="#">Very Very Very Very Phrase</a>
</section>

CSS

.button {
    padding: 10px 15px;
    width: 150px;
    background-color: deepskyblue;
    color: white;
    margin: 3px;
    text-align: center;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.buttonsSection {
    margin: 30px 0;
    display: flex;
    justify-content: center;
}

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