Flexbox Vertical Center - Solution

HTML

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

CSS

.button {
    padding: 50% 15px 0 15px;
    width: 150px;
    background-color: deepskyblue;
    color: white;
    margin: 3px;
}

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

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