I have been trying to figure out how to center a fixed element on my screen, but all the solutions I've found so far are not working for me. Originally, I tried fixing my div in the center of the screen using `mx-[40%] mt-[10%]', but it only looked okay on my exact screen size. Any zooming or viewport manipulation made the aspect ratios look odd.
Then, I attempted to fix the aspect ratio using aspect-[4/3], but I couldn't get it to center properly with flexbox - the div always extended across the screen.
After searching on Stack Overflow, I found a solution that seemed promising, but even after tweaking it by setting min widths and heights, the issue persisted. The div was centered only on specific screen sizes, and when zooming in and out, the right border moved while the left remained fixed, causing the div to lose its margins and look distorted.
Here is how it looks on a slightly non-standard resolution at 100%, still not completely centered: https://i.sstatic.net/9OoJJ.png