Trying to vertically and horizontally align a spinner in a bootstrap 4 card body.
I have tried my-auto and justify-content-center & align-items-center, I am missing something.
I have checked by display types and I believe my displays of absolute are correct
I have also checked my positions and I believe I am using flex correctly.
My goal is to load the spinner on the body on any card vertically and horizontally.
What am I overlooking?
CodePen: https://codepen.io/sterling415/pen/xBErWV
HTML:
<div class="container"><div class="row"><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";}