My loader position not in middle center, please change my code. (im sorry my english is bad haha). ok senior designer, this my code.
.loader-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 100vw;
height: 100vh;
z-index: 9999999999;
}
this is preview of my code, can you make this in center middle position? please, this my first project hehe :)
For the container as overlay to span the entire viewport just use position: fixed; inset: 0;
which is shorter and easier.
To center the loader use Flexbox. justify-content
aligns the child elements along the main-axis (flex direction) and align-items
along the cross axis.
top: 50%
does not work correctly in your case as percentages are always relative to the parent element. By default an elements height will be auto
or which is undefined
and calculated to fit-content
. 50% of undefined is also undefined!
.loader {
height: 4rem;
width: 4rem;
background-color: blue;
border-radius: 50%;
}
.loader-container {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
<div class="loader-container">
<div class="loader"></div>
</div>