Flexbox Vertical Center

by DogByteMarketing

HTML

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

CSS

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

.buttonsSection
{
    margin: 30px auto;
   
    border-spacing: 3px 0;
}


.button
{
    display: table-cell;
    vertical-align: middle;
    padding: 10px 15px;
    background-color: deepskyblue;
    color: white;
    text-align: center;

}