vertical center an image without knowing dimensions - html

Question

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. Imagine a thumbnail list I get from the database. I don't want every item to be sticking to the top of the parent div.
<div id="wrapper">
<div id="parent">
<img src="path/i/got/from/database/image.png" />
</div>
</div>

Answer 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.

Answer 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:
<div id="wrapper">
<div id="parent">
<img src="http://placehold.it/200x200" />
</div>
</div>
CSS:
img {
vertical-align: middle;
}
#parent {
height:400px;
border:1px solid black;
line-height: 400px;
}
Output:

Answer 3

#parent img{vertical-align:middle;}

Answer 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:
<div id="wrapper">
<div id="parent">
<span> </span><img src="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 */
}
#parent span {
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 */
}
#parent img {
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

Answer 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/

Answer 6

You can use this:
#wrapper{
height: 100%;
min-height: 500px;/*Assuming min-height of the container*/
position: relative;
width: 100%;}
#parent{
border: 1px solid;
height: 50px;
position: absolute;
top: 50%;
width: 50px;}
Check this in fiddle too http://jsfiddle.net/kYgqx/2/