0

I have a project that basically works in 2 layers. The layer at the bottom has a large SVG object with a ton of different paths. The layer on top is a small SVG object that I want to keep perfectly centered. The bottom layer has a CSS position of absolute and the top one is fixed. The top SVG "kindof" stays centered, but if I change the zoom on the Safari browser for example, then the centered effect is lost in some scenarios. Are there life cycle methods in web design? Can I call a method whenever ANY change occurs to the viewport, that could allow me to reposition the top layer SVG design dynamically, and for it to remain perfectly centered no matter what?

PS: I'm looking to eventually move this project onto React-Native (which I know nothing about), Are web design rules even relevant if you're looking to migrate to a mobile based platform? Apologies for the lack of code, Thank You for reading!

Steve M.
  • 55
  • 6

1 Answers1

0

Put this two lines in style.css In your specified div class.

display: block;
margin: auto;

and then try to run it, you will be able to see that .svg aligned in the center.

or check this if mine dose not work

anirudh
  • 129
  • 7
  • Hi, I'm still not having any luck with this. If I place let's say a simple circle SVG and try to center it, and go on Safari (on mobile) the circle doesn't stay centered as I zoom and pan around. Thanks for the response tho! – Steve M. Jun 14 '21 at 18:09
  • hey, there try out this [link](https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/) as the code above works for me in chrome @SteveM. – anirudh Jun 15 '21 at 04:08