How to add text above spinning gif during Ajax call/HTML blocking - ajax

Question

I found an excellent solution here to add a spinning GIF during a long (8-12sec) Ajax call, but I can't figure out how to vertically centre some text just above the GIF that will remain in the same relative position no matter the screen size.
Here's what I have so far:
<style>
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
}
</style>
This DIV is at the bottom of my body section:
<div class="modalLoading">
<div style="margin-top:25px">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
</div>
What it looks like now:
What I want it to look like:
EDIT
Trying the code from doesn't yield the desired results.
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none; /* if this is set to 'Flex' then the modal blocking appears on page refresh */
position: fixed;
/*z-index: 1000;*/
top: 0;
right: 0;
bottom: 0;
left: 0;
/*height: 100%;
width: 100%;*/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-top: 100px;
}
<div class="modalLoading">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
EDIT 2
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: flex;
position: fixed;
/z-index: 1000;/
top: 0;
right: 0;
bottom: 0;
left: 0;
/height: 100%;
width: 100%;/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: flex;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-top: 100px;
}

Answer 1

To center vertically a text, a possible solution is to use flexbox.
With this HTML:
<div class="modalLoading">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
You can write this CSS:
.modalLoading{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}
.modalFont{
margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
text-align: center;
}
EDIT 1
To work only after AJAX call, I only edited CSS the previous HTML I wrote doesn't change:
.modalLoading {
display: none; /* hidden when refresh the page */
position: fixed;
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*height: 100%;
width: 100%;*/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
body.loading .modalLoading {
overflow: hidden;
}
body.loading .modalLoading {
display: flex; /*display using Flexbox */
}
.modalFont{
margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
text-align: center;
}