Vertical Center An Image Without Knowing Dimensions

I have centered a lot of stuff in my webdevelopment career, but I was wondering if there is a simple way to centering an image vertically without knowing the image's dimensions. Im

Solution 1:

You could use this CSS on your parent:

#parent {
    display:table-cell;
    vertical-align:middle;
}

Note that this will make the parent element behave like an inline element.

Example.

Solution 2:

If your design doesn't allow you to make parent inline (if it does, use Purmou's solution, it's better), you can set line-height on parent equal to its height and vertical-align: middle; on your img.

Demo: http://jsfiddle.net/ThinkingStiff/YRGBk/

HTML:

<divid="wrapper"><divid="parent"><imgsrc="http://placehold.it/200x200" /></div></div>

CSS:

img {
    vertical-align: middle;
}

#parent {
    height:400px;
    border:1px solid black;
    line-height: 400px;
}

Output:

Solution 3:

#parentimg{vertical-align:middle;}

Solution 4:

There is a trick to do this, even without Javascript. What we need ist to know the height of the parent and we also need one more tag.

First, add a SPAN-tag before or after the IMG-Tag:

<divid="wrapper"><divid="parent"><span>&nbsp;</span><imgsrc="path/i/got/from/database/image.png" /></div></div>

With this, the following CSS declaration aligns the image as wanted:

#parent {
   height: 500px;      /* This height is important for the following lines */line-height: 500px; /* Text-content needs to get full height for the
                          'vertical-align'-attribute to work */
}
#parentspan {
   display: inline-block; /* Should work even for IE6/7 in this case */height: 500px;         /* Needed for IE */width: 10px;
   margin-right: -10px;   /* Any element to the right is pushed to the left
                             offset of the SPAN-tag */ 
}
#parentimg {
   vertical-align: middle; /* Aligns the image in the middle of the SPAN-tag */
}

This should work even for IE6 and 7.

Edit:

• ThinkingStiffs solution is simpler and thus better. I just doesn't work in IE6.

• Purmous solution doesn't work for IE6 and 7, see The display declaration

Solution 5:

I found this while searching for a solution to a similar problem the solution uses CSS3 so won't work on IE8 and below.

While this is an old question I figured an updated answer might be useful to someone:

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png">
    </div>
</div>

#parent{
    width:400px;
    height:400px;
    background:red; /* just used to highlight box */
    text-align:center;
}    
#parent img{
    position:relative;   
    top: 50%;
    transform: translateY(-50%);
}

See this fiddle: http://jsfiddle.net/E9sTk/