How to show text beneath the rotating image - html

Question

I want to show some text below the loading image.But text is aligned to different position in different browser. I have attached the screen shot of chrome and IE browser
Below is the HTML i have used
.LoaderwithText {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
top: 50%;
left: 50%;
white-space: nowrap;
}
.loader {
border: 12px solid #f3f3f3;
/* Light grey */
border-top: 12px solid #3498db;
/* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
-ms-animation: spin 2s linear infinite;
-webkit-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
opacity: 0.5;
position: absolute;
}
#LoaderText {
Color: black;
font-size: 14px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
<div class="LoaderwithText">
<a class="loader"></a>
<p id="LoaderText">Deleting...</p>
</div>
What i am missing in the style that should make it work in all browser.
IE
Chrome

Answer 1

If you are using flex, you need to size the container to center its content:
Absolute element can also be centered via coordonates and margin if they have a static size.
.LoaderwithText {
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
white-space: nowrap;
/* update*/
top: 0;
left: 0;
width:100%;
height:100%;
}
.loader {
border: 12px solid #f3f3f3;
/* Light grey */
border-top: 12px solid #3498db;
/* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
-ms-animation: spin 2s linear infinite;
-webkit-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
opacity: 0.5;
position: absolute;
/* update*/
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
#LoaderText {
Color: black;
font-size: 14px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
<div class="LoaderwithText">
<a class="loader"></a>
<p id="LoaderText">Deleting...</p>
</div>