Question

My page has space for an image that can be, say, a maximum 100×100 image. Users can upload any image dimension and the web application will resize it, maintaining aspect ration, to 100×100. So, it’s possible for images to be resized to, say, 75×100 or 100×75, etc.

Regardless of the resized image’s dimension, I want it to appear vertically and horizontally centered in its allocated space on the web page. How do I do this in CSS? Will I need a containing div, like this:

<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>

Anyway, sample CSS would be helpful. Thanks!

Answer 1

Try this – http://jsfiddle.net/zYx4g/
This will work on image of any size and in all browsers.

.image_container {
    width: 300px;
    height: 300px;
    background: #eee;
    text-align: center;
    line-height: 300px;
}

.image_container img {
    vertical-align: middle;
}
​