How do you center an image of unspecified dimensions horizontally & vertically inside a div tag of unspecified dimensions... without using background images, javascript or tables? (CSS 2.1 + IE 8+). The div will also contain another div tag containing the image's caption. I'm assuming that the width of the image will be 450-600px and the height will be significantly smaller (350px or less).

I can't use the answer here because it assumes that you know the dimensions of the DIV.

I think I'm halfway there, but now I need the div caption inside the div to be no wider than the image above it.

I'm doing this for epub ebook design and I can't know in advance how wide the image will be, but the div will cover the entire width of the screen. One issue I'm facing is that I assume I'll be viewing in 600x800 or 768-1024

I think the heart of my problem is that I would like an image scaling solution, but there's not a good css 2.1 solution for scaling image height. Failing that, I'd like to have a way to have my wide image centered in the screen. That's something I haven't yet figured out how to do.

I think this is what I want. The code example in action is here. There seems to be no way to fix the second line of the caption without first knowing the image dimensions. (Perhaps I could achieve this with a one column two row table where the image resides in a table cell).

It looks good on 800x600 and minimally acceptable on 1024x768. PS, I changed display to "inline-block" on the div in order to keep the subcomponents together on the same page.

This is a helpful solution, but the epub spec (and the kindle reader) only support a subset of the CSS. For example, it doesn't support outline http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm#Section3.2 . It does however support display: table-cell (news to me). I need to verify that Kindle supports table-cell for div tags. (Kindle is the worst, but actually if it weren't supported, I could live with that). — Robert Nagle almost 8 years ago

I updated the original question with example code and included a reference to the caption which also seems to affect the overall css code. http://jsfiddle.net/8tEZb/7/ — Robert Nagle almost 8 years ago

I only added the outline to make it possible to verify the image was indeed in the middle of the cell (and outline, unlike border, doesn't interfere with the box model. — Rob Crowther almost 8 years ago