Center Image (vertically & horizontally) inside a Div

Asked Mar 12 '13 at 18:42

Active Mar 12 '13 at 18:50

Viewed 325 times

I have a container div, and I want to show an image inside it. Image is going to be dynamic. It's dimensions could be greater/lesser than the dimensions of the div. I want to show entire image inside this div centered (horizontally and vertically) . How do I do that?

I have read few similar questions like this one. But most of them talk about ways to do this given that the image dimensions are known. Also, I've got horizontal centering working with margin set to auto.

EDIT: adding my css styles so far, gallery container is the bigger div, and photo container is the one that wraps around the image.

    /* Gallery */
    #gallery-container { 
        position:absolute; 
        overflow:hidden;
        width:100%; 
        height:100%; 
        top:0; 
        left:0; 
        display:none; 
        z-index:100; 
        text-align: center;
   }


   #gallery-container .gallery-photo-container{
       position: relative;
       width:80%; 
       height:100%;
       margin: auto auto;
   }

   #gallery-container img{
       position: relative;
       max-width:100%; 
       max-height:100%;
   }

edited May 23 '17 at 10:30

Community

asked Mar 12 '13 at 18:42

sublime

4,013
9
53
92

http://css-tricks.com/centering-in-the-unknown/ – cimmanon Mar 12 '13 at 18:47
possible duplicate of [Vertically align an image inside a div with responsive height](http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height) – Hashem Qolami Feb 27 '14 at 18:31
its a year old question, how did you even find this? – sublime Feb 27 '14 at 19:31

Center Image (vertically & horizontally) inside a Div

0 Answers0