Text Alignment changed when window size is changed - html

Question

I'm trying to make it where the percentage text and loading text stays in the middle of the loader when I resize. The width change works when I resize the window, but when I change the height it moves the text. I'm not sure why this is happening but if someone is able to help me under why this is happening that would be nice.
CSS:
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
background: url("https://cdn.cporigins.com/site/images/bg.jpg");
margin: 0;
}
.container {
display: none;
position: relative;
font-family: 'Do Hyeon', sans-serif;
font-size: 27px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
bottom: 50px;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
a {
text-decoration: none;
}
a:hover {
color: #add8e6;
}
i#heart-icon {
height: 18px;
width: 18px;
background-image: url(https://cdn.cporigins.com/site/images/heart_icon.png);
background-repeat: no-repeat;
}
i#heart-icon:before {
content: "";
padding-right: 18px;
}
.loader {
font-size: 10px;
margin: 50px auto;
border: 16px solid #f3f3f3;
border-top: 16px solid #6294f9;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
background-repeat: no-repeat;
position: relative;
bottom: -32%;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#loadingDiv {
position: relative;
top: -50px;
left: 0;
width: 100%;
height: 100%;
background: #8360c3;
background: -webkit-linear-gradient(to top, #2ebf91, #8360c3);
background: linear-gradient(to top, #2ebf91, #8360c3);
}
#loaderTxt {
position: relative;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
top: 297px;
font-weight: bold;
text-align: center;
}
#loaderPercent {
position: relative;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
top: 128px;
font-weight: bold;
text-align: center;
}
</style>
I basically have it where it appends the divs to the html tag in js.
$('html').append('<div id="loadingDiv"><div class="loader"></div><div id="loaderTxt">Initializing Origins</div><div id="loaderPercent">0%</div></div>');

Answer 1

In these type of design you got to put the container to flex and center all items ( make it relative too )... Now make all items inside it absolutely positioned ... Here all items will come to the center ( of that container )... Viola, You will never get a problem of putting out the elements based on px size ever again..
html {
height: 100%;
width: 100%;
}
body {
background: url("https://cdn.cporigins.com/site/images/bg.jpg");
margin: 0;
}
#loadingDiv {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #8360c3;
background: -webkit-linear-gradient(to top, #2ebf91, #8360c3);
background: linear-gradient(to top, #2ebf91, #8360c3);
}
.loader {
font-size: 10px;
margin: 50px auto;
border: 16px solid #f3f3f3;
border-top: 16px solid #6294f9;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
background-repeat: no-repeat;
position: relative;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#loaderTxt {
position: absolute;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
bottom: 10vh;
font-weight: bold;
text-align: center;
}
#loaderPercent {
position: absolute;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
font-weight: bold;
text-align: center;
}
<div id="loadingDiv">
<div class="loader"></div>
<div id="loaderTxt">Initializing Origins</div>
<div id="loaderPercent">0%</div>
</div>

Answer 2

Try to end your css alignment line with !important
so if you want to align this html text
<p>THIS IS MY TEXT</p>
You can use css like this
p{text-align:center !important;}
I hope this answer helps.