How does this CSS for centering an element work?
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
This is the CSS code for centering the button in the viewport. Can anyone explain how this works? I found it somewhere on the internet and it seems to work, but I don't need the field and transformation correct. Naturally the code won't work without them, but intuitively I feel that the first three should be enough to center the element. I'm relatively new to CSS, so I would understand if this is considered a stupid question :)
source to share
Take a look at this article: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ . Simply using the first three lines of css (position, top and left) will center the top left corner of the object, making the entire object completely off-center. A negative translation moves the object up and to the right by half its height and width, respectively, making the object centered. Actually, I don't think you even need the right code, but I could be wrong.
source to share