Center logo and allow to overlap menu container

Is there a way to center the logo and once centered, allow it to overlap (be on top of) the menu?
I know this sounds odd, but yea.

I centered the logo with this: div .logo { left: 45%; }

But the auto scaling interferes with the menu container. I would like to have both the menu container and logo container behave normally as if the didn’t even know each other existed, so to speak.

Thanks