How can I center a box of unknown width in CSS?

Question

I have this html:

    
    This is the caption
&l         


        
      

Answer 1

I had to do this for a jQuery photo gallery... What I ended up doing was when a photo was selected, the current photo would fade out and the new picture would be loaded, then calculate the difference of the width of half the container minus half the width of the photo. I would then set margin-left (and margin-top vertically) with that value.

    thewidth = $('#thephoto').width();
    theheight = $('#thephoto').height();
    $('#thephoto').css("margin-top",250-(theheight/2));
    $('#thephoto').css("margin-left",287.5-(thewidth/2));
    $('#thephoto').fadeIn(300);

This is where my Flash background really came in handy :)