On my page, I want to ensure that the logo is always perfectly centered both horizontally and vertically when the page loads without any interactions.
To achieve this, I used simple margin properties:
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
height: 100px;
While the logo alignment works well with a full background, I also plan to add small 50px square divs to the right of the logo for login, mail, and info icons. These divs will expand upon clicking to show relevant fields.
The challenge I face is maintaining the center alignment of the logo when the adjacent div expands. Whether the logo moves up as the div expands or stays centered while the div grows downwards doesn't matter to me.
Please note that compatibility with browsers older than IE9 is not necessary for this design.