CODEWITHSUNDEEP
htmlcssfullscreencentercentering
Vincent Teyssier
Vincent Teyssier

Reputation: 2217

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

Upvotes: 0

Views: 697

Answers (1)

SW4
SW4

Reputation: 71170

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.

Upvotes: 1

Related Questions