How to horizontally center a larger div of variable width, within a smaller div of variable width

Question

I want to achieve the following effect: http://jsfiddle.net/3KJta/1/

Howev

Answer 1

If you are ok with using css3 and only support modern browsers you can use transform: translateX(-50%); to center the bigger box (currently supported browsers).

See this example: http://jsfiddle.net/2SQ4S/1/