Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?

Question

If I have a fixed sized container div, and an unknown sized image, how do I horizontally and vertically center it?

• using pure css
• using JQuery if css

Answer 1

You can also align this way. At least thats how i did it and it worked for me. May not be the best way of doing it. I had a bunch of different size logos inside fixed size divs.

First get the dimensions of the image. Then based on the height of your div you can figure out what the top margin should be. This will vertically center it. Just change $IMG_URL and $DIVHEIGHT values.

list($width, $height, $type, $attr) = getimagesize($IMG_URL);
$margin-top = number_format(($DIVHEIGHT - $height) / 2, 0);

For example.