Try making the window narrower so that the html pane in the bottom right gets horizontal scroll bars. (In the real world, there might be a two column layout, such that the textual content fits in the narrow window, but the full width of the content doesn't.)
Even when the window is narrow, all of the content in the top div can be accessed by scrolling horizontally. In bottom div, the left hand side of the content gets clipped because it is positioned to the left of the window, and scroll bars don't extend into negative offsets. If you're positioning an adornment which doesn't actually need to be visible, the negative margin trick might be OK. But for normal body content, margin: auto is the way to go.
Here's an example of text-align: center and margin: auto side-by-side: http://jsfiddle.net/wH5Pd/
Try making the window narrower so that the html pane in the bottom right gets horizontal scroll bars. (In the real world, there might be a two column layout, such that the textual content fits in the narrow window, but the full width of the content doesn't.)
Even when the window is narrow, all of the content in the top div can be accessed by scrolling horizontally. In bottom div, the left hand side of the content gets clipped because it is positioned to the left of the window, and scroll bars don't extend into negative offsets. If you're positioning an adornment which doesn't actually need to be visible, the negative margin trick might be OK. But for normal body content, margin: auto is the way to go.