[Apfhex]

What I want to do is, for the "full view" of a paining gallery site, have the image set in the dead center of the page. I've followed the instructions at http://www.wpdfd.com/editorial/thebox/deadcentre4.html to get a fixed width/hight object to stay in the center of the page, however, I have over 50 images to do this with and I'm not going to get the pixel dimensions of each one and create a separate CSS entry for them all.

Given that each image is going to be a different size, is there a way to accomplish this? I thought about placing the image inside a div and centering the div, but I'm having troubles with that.

[Obi Wan's Ghost]

http://cssplay.co.uk/menu/lightbox3.html#portrait1

[registered_user]

Well that doesn't answer the question at all, now does it?

Yes, there is a way to do this. But it's not easy.

If you set html, body, and whatever container you are using to height: 100% then your container is the full height of the window. If you set the img within your container (it must be inline and not block) to vertical-align: middle, it will be centered within the container.

Or, you can use a table. It's not semantic as a table, but then, a one celled table can be considered to be always semantic depending on your point of view.

Alternatively, you can set your image to display none (keeping the image in the mark up to maintain semantics), and use the image as the background on the body positioned at 50% 50%

[Apfhex]

Thanks for the suggestions, I'll try them out later and see how it works out.

[Apfhex]

It sure it easy to center the image or anything else vertically, but neither of the first two methods you mention want to align anything horizontally. The image remains at the top of the page.

But the third method, setting it as the background, allowed it to be centered. And then I can include the image invisibly like you say. Seems to work.

Ultimately, I might go for a simpler solution (not trying to get the image centered), but this is good for now.