Responsive center Animation in Framer Motion

Question

I have a logo SVG that I want to come to the center of my page on screen load. I want it to animate and then animate to its spot in the navbar.

Right now because the logo changes size as the screen increases size up to a point using a vw on my x property starts to break down at different screen sizes.

Using 50vw seems to center the SVG from the left side, which does not look good, so the x in VW needs to change as the page size increases.

Is there a way to center this animation on my page like I would in a flex box, so I don't have to make a ton of break points for my animation?

so I need something like this but something that would actually cause the animation to stay centered in the page no matter what size.

const svgVariants = {
  hidden: { scale: 0.1, rotate: -360, x: "50vw", y: "100px" },
  visible: {
    scale: 2,
    rotate: 0,
    x: "50vw",
    y: "100px",
    transition: { duration: 2 },
  },
  exit: {
    x: 25,
  },
};

const svgVariants2 = {
  initial: { scale: 2, translateX: "50vw", y: "100px" },
  animate: {
    scale: 1,
    translateX: "0vw",
    y: "0px",
    type: "spring",
    ease: "easeInOut",
    transition: { duration: 2 },
  },
};