Spent 30 minutes trying to center a div vertically and i finally gave up
you can center both at the same time with position : fixed; left : 50%; top : 50%; transform : translate(-50%,-50%);
Please don't do this in most cases - it gets really messy! Instead make the parent element have 100% width and 100vw height, set the display to grid, and use place-items: center
Ah, I didn't know that there are two child elements. Your best solution then would be these styles in the parent:
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;