QR code component using basic CSS properties

Hello everyone. First, please excuse my somewhat stupid questions as I am a total beginner in web development.

Here is my version of the QR code component challenge.

Although the rendering seems pretty good, I struggled a lot when it came to center the #container div (horizontally and vertically). I noticed that if the element’s position is set to absolute and you directly apply margin: auto; on it, it’s not going to work. This article (https://programmersportal.com/fix-margin-auto-not-working-with-position-absolute-problem-in-css/?utm_source=pocket_saves) explains that to center horizontally a absolutely positione <div> using "margin: auto;", we should apply a width and specify "left : 0; right: 0;" to that <div> element. In the same way, to center vertically, we should apply a height and specify it a "top: 0; bottom: 0;". It did work, but I still don't understand why.

Apart from that, since this is my first project, could you advice me better practices or other faster/easier ways to do that ? Take in consideration that I did not learn anything about Flexbox or Grid, yet.

(sorry for poor english)

Thanks in advance !