Can anyone help me with centering an image on my website? I've tried the following code:
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
You can see what's happening on my site here:
The issue I'm facing is that I have a fixed menu bar at the bottom of the screen, which prevents the image from being perfectly centered. Additionally, on iOS Safari, the image looks even more off-centered (I suspect this has to do with Safari's disappearing menu bar when scrolled).
Is there a way to vertically center the image while taking into account the menu bar, ensuring it sits perfectly between the top of the browser and the menu bar?
Also, is there a solution for the shifting menu bar problem on iOS Safari?
Here are screenshots from Chrome and iOS Safari for reference (please note the extreme case only happens in iOS Safari):
Thank you!
p.s. I don't have enough reputation to add images directly, hence the links...