Question

I have a div that is absolutely positioned from the top left corner of the browser that is 300px by 300px. I plan to show an image in the div but unfortunately I do not know the size of the image although I do know that the image will be 300px by 300px or smaller.

How can I create a div that has a set width and height of 300px that centers images of the same size or smaller horizontally and vertically?

Answer 1

#container { width: 300px; height: 300px; line-height: 300px; text-align: center; }
#container img { vertical-align: middle; display: inline-block; }

​
jsFiddle Demo