Question

How do I center align the image to vertically and horizontally to the div.

I need to get this without fixing height or padding because the image sizes are not constant so it should be flexible with all the images.

Here is my trail
http://jsfiddle.net/yHdAx/2/

Answer 1

Hey now you can used to table-cell properties in your div as like this

live demo http://jsfiddle.net/yHdAx/3/

HTML

 <div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>

Css

  .test{
background-color:red;
height:600px; display:table-cell; vertical-align:middle;
    text-align:center;
}
.test img{
max-width:50%;

}

more info http://www.brunildo.org/test/img_center.html