I recently found a code snippet that beautifully centers a login box, which I implemented. However, I realized that I actually wanted the login box to be positioned 25% from the left instead of 50%. The interesting part is, the code doesn't follow the traditional method of centering elements that I found through Google search that involves using left: x% and negative margin. This code, though unconventional, does the job perfectly.
Despite its effectiveness, I am puzzled as to how this code actually works. I would greatly appreciate it if someone could provide an explanation so that I can manipulate it to achieve the desired position.
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.Absolute-Center.is-Responsive {
width: 50%;
height: 50%;
min-width: 200px;
max-width: 400px;
padding: 40px;
}
<div class="container">
<div class="row">
<div class="Absolute-Center is-Responsive" style="text-align: center">
hello
</div>
</div>
</div>
It appears that without the Bootstrap CSS, the centering is not perfect.
My main objective is to be able to 'center' it at any specified position that remains consistent when the page is resized. Any insight into how this code works would be immensely helpful for me to comprehend it better. Alternatively, if there are better ways to achieve the same effect, I would welcome any suggestions. Thank you.