How to make a image center in a div?

Question

My HTML code looks like this:

<div class="ctn">
    <img src="some-img.jpg"/>
</div>

The ctn should be a fixed size, say, 150*150.

But the size of IMGs may bigger or smaller: 200*50, 50*200, 50*50 etc.

How do i make the image fit in the center of the div ? The image's proportion should not be changed.

====UPDATE==== Yes, I need both hori & vertical center.

Answer 1

You could add css, to center the image both horizontally and vertically:

DIV.ctn {
    min-height: 150px;
    min-width: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table-cell;
    vertical-align: middle }

...

<div class="ctn">
    <img src="some-img.jpg"/>
</div>

Edit: for details see: http://www.w3.org/Style/Examples/007/center.html

Answer 2

Try the following:

text-align: center;    
display: table-cell;
vertical-align: middle; 

DEMO