There are numerous discussionsn on SO but I've tried suggestions without success. I have a DIV within which I need an image, whose height and width are unknown, to be centered horizontally and vertically.
I also need this multiple times so I don't want to have to add more CSS code each time.
Here's what I have in terms of CSS and HTML for the DIV.
border: solid 4px #EAEAEA;
<img src="image.png" />
To give credit, I reviewed this very helpful article: http://phrogz.net/css/vertical-align/index.html
You need to add 3 more CSS rules to
text-align: center; display: table-cell; vertical-align: middle;
The first line is pretty obvious; it gets you centered horizontally. The second line gets your div to behave in a table cell-like manner, and the third makes the vertical alignment happen. I'd post a jsfiddle to demonstrate but they are doing some maintenance stuff today. I did test it and it worked in current Chrome and FF and IE 8.