How to have a fixed width/height image always centered in a div?

I am looking for a way to have an image dynamically centered on any div size. How is this possible?

I have posted a jsFiddle for better understanding here http://jsfiddle.net/4exmm/ but a开发者_Python百科s I said the div size is changed using a PHP script.

Vertically and horizontally aligned:

http://jsfiddle.net/4exmm/2/

Make your div text-align: center. http://jsfiddle.net/4exmm/1/

#image {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E1E1E1;
    float: left;
    margin-right: 10px;
    padding: 3px;
    width: 300px;
    text-align:center;
}

Just add this rule to #image:

text-align:center;

Why not just text-align: center on the div

you could also make your img margin: 0 auto to keep it aligned withing whatever object