Unless you use a strict doctype. http://stever.ca/web-design/centering-a-div-in-ie8-using-mar... I don't think text-align: center on the parent box is significantly different in principle: confusing until you know why it's being done that why and roughly how it works.
Personally I like negative margin better than text-align: center since the style is only applied to the box being centered rather than the parent box and the box itself, but surely this is a matter of preference or the design of the particular page in question.
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.
Personally I like negative margin better than text-align: center since the style is only applied to the box being centered rather than the parent box and the box itself, but surely this is a matter of preference or the design of the particular page in question.