How do I vertically align an image block on the center of the header section of a home page for all screen views

I'm trying to build a website home page where there's an intro logo animation of a white logo on a blue bg that fades out into the same logo in blue on a white bg. I've tried adjusting it without CSS and while it works alright on my phone I get mixed results on desktop depending on the size of my browser. Is there any way I can use CSS to have it always vertically aligned in the same size so it appears at the same spot as the intro animation? I'm using Squarekicker to design the site as well but it doesn't really help me with this case.

This is the site: https://www.casacicheti.com/home-1

You mean this logo?