How to center image in 300px by 300px div? (Image dimensions not known)
css, html, layout
Solution
#container { width: 300px; height: 300px; line-height: 300px; text-align: center; }
#container img { vertical-align: middle; display: inline-block; }
jsFiddle Demo
Problem
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?