How to center the image of unknown size inside div?

Add the following:

The first two lines center it vertically, the last horizontally.

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

more info can be found here: http://www.w3.org/Style/Examples/007/center

The background image method will work, with background-position:center center, unfortunately you'll lose control of scaling your image.

You can set your image as follows:

position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

PS. Keep in mind that this will be centered relative to its closest positioned parent.

Related