Uh... if A is in the center of B which is in the center of C, then A should still be in the center of C. Right? Because right now it sounds like you're telling me that if A is in the center of B which is in the center of C, then A will be to the right of the center of C. HTML makes no sense sometimes.
EDIT: I tried both, and as it turns out, if both are center, "SUP BRO" ends up in the center, but if body { text-align: center; } and DIV.main-content { text-align: left; } it ends up on the left side. Which makes sense, I guess.
What I really wanted was to put "buffering" at the very middle of the screen and the image in the bottom center. The page would "fill" the whole screen but with no scrolling needed to see the image. Like this: