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 use and extra element you can do it:

    

    

        
I'm extra
    

CSS

.larger {
    position:relative; 
    left:50%;
    width:8000%;
    margin-left:-4000%;
    text-align:center;
    border:none;
}
.larger div {
    width: 200px;
    height: 200px;
    border-color: blue;
    margin:auto;
}

http://jsfiddle.net/3KJta/4/

although that does cause some issues with content being wider than the page so you would need it all in a container with overflow:hidden:

http://jsfiddle.net/3KJta/7/

All a bit ugly though. Perhaps there's a solution where you can avoid doing this. Maybe a JS solution that measures the size of the content you're trying to show and offsets it.