I am having trouble centering a div in my footer. When I try to center it, the div ends up floating on top of the footer instead. Here is the link to the codepen.
footer {
text-align: center;
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
height: 1.5em;
display: block;
transition: bottom 0.3s;}
.test {
float: none;
background-color: blueviolet;
position: absolute;
display: inline-block;
height: 1.5em;
width: 90%;
padding: 0;
bottom: 50%;
left: 50%;
transform: translate(-50%, -50%);}