Search code examples
htmlcssfullscreencentercentering

Div fullscreen and responsive: vertical centering

I have a div containing an image.

My image proportions do not fit regular screens, therefore I want it to be full width, knowing that there will be a vertical overflow.

The problem is that I don't manage to center it vertically.

I can't use negative margin as I want this system to be responsive.

I thought about using a jquery script calculating screen resolution and then setting a negative margin top, but if someone have any idea how to do that in css it would be great.

Thanks for your help

Solution

  • You can accomplish this by transforming the image on the y axis:

    img{
    top:50%; // move the top of the image to the vertical center of the parent
    transform:translateY(-50%); // offset the top of the image by half its height, thereby 'true' vertical centering it within the parent
}

    nb. You may need to set a position to the image and parent if you are experiencing issues implementing this.