Flexbox Vertical Center

by Glynne Turner

HTML

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

CSS

section{height:100vh}
.button {
    padding: 10px 15px;
    width: 150px;
    background-color: deepskyblue;
    color: white;
    margin: 3px;
    text-align: center;
}

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

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