Seeking to center a spinner both vertically and horizontally within a bootstrap 4 card body.
Despite trying my-auto, justify-content-center & align-items-center, it seems like I'm missing something.
I've double-checked the display types and I believe my absolute displays are correct
Positions have been reviewed as well, and I am confident in my use of flex properties.
The ultimate goal is to position the spinner in the center - both vertically and horizontally - on any card's body.
What could I be overlooking?
CodePen: https://codepen.io/sterling415/pen/xBErWV
HTML:
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body justify-content-center align-items-center">
<div id="overlay" onclick="off()">
<div id="justify-content-center align-items-center">
<div class="spinner"></div>
</div>
</div>
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<button type="button" class="btn btn-primary" onclick="on()">Turn on overlay effect</button>
</div>
</div>
</div>
</div>
CSS:
.spinner {
height: 60px;
width: 60px;
margin: auto;
display: flex;
position: absolute;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left: 6px solid rgba(0, 174, 239, .15);
border-right: 6px solid rgba(0, 174, 239, .15);
border-bottom: 6px solid rgba(0, 174, 239, .15);
border-top: 6px solid rgba(0, 174, 239, .8);
border-radius: 100%;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
#overlay {
position: absolute;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
JS:
function on() {
document.getElementById("overlay").style.display = "flex";
}
function off() {
document.getElementById("overlay").style.display = "none";
}