I'm having trouble centering a loading image on my screen. It seems to be centered closer to the bottom rather than in the middle. Any suggestions on how I can adjust it to be more centered vertically?
Edit: I also want it to look good on mobile devices
https://i.sstatic.net/Ejeb4.png
Here is the CSS and HTML code:
<style>
input[type=file]{
float:left;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 100px;
height: 100px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.bd-example-modal-lg .modal-dialog{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bd-example-modal-lg .modal-dialog .modal-content{
background-color: transparent;
border: none;
}
</style>
<div id="loading" class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content h-100 row align-items-center vertical-center-row" style="width: 48px">
<span class="loader"></span>
</div>
</div>
</div>