Center an Image vertically and horizontally using CSS

css, html, image, javascript, jquery

Solution

Pretty easy, this is the format of all my images/containers:

<div class="photo"><img /></div>
<style type="text/css">
  div.photo { height: 100px; line-height: 100px;text-align:center; }
  div.photo img { vertical-align:middle;}
</style>

Problem

How do I vertically and horizontally center an image when I do not know the size of it? I asked this question and someone suggested using a table. This isn't the first time I heard a table can do it but I tried without luck. Searching SO only got me results when I do know the size of the image. How do I do this with a table? NOTE: JavaScript/jQuery is not preferred but if there's a solution with it I'm open to it.

Original source