JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<style type="text/css">
/* Layout */
#box {
    width: 300px;
    height: 300px;

    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;

    z-index: 2;
}

#box a {
    display: block;
    padding: 6px;
}

#footer {
    width: 100%;
    height: 20px;

    position: absolute;
    left: 50%;
    top: 100%;
    margin: -40px 0 0 -50%;

    z-index: 1;
}

        </style>

        <style type="text/css">
/* Colors and Style */
body {
    background-color:white;
    font-family:Helvetica;
}

#box {
    background-color: orange;
    text-align: center;
}

#box a {
    font-size: 1.6em;
}

#box a:link,
#box a:visited {
    color: white;
    text-decoration: none;
}

#box a:hover {
    color: orange;
    background-color: white;
}

#footer {
    color: lightgray;
    text-align: center;
}

#footer a:link,
#footer a:visited {
    color: lightgray;
}

</style>
</head>

    <body>
        <div id="box">
            <div>
            <a href="#">Link A</a>
            <a href="#">Link B</a>
            <a href="#">Link C</a>
            <a href="#">Link D</a>
            </div>
        </div>

        <div id="footer">
        </div>
</body></html>

CSS

#box{
    display: table;
}
#box > div {
    display: table-cell;
    vertical-align: middle;
}