The text-align property aligns text, but does not affect box position or width. See how the box expands to the full width of its container (the window, in this case).
What if we want the box to be centered, but the text inside it to be left-aligned? Explicitly setting the width prevents the box from filling the window, and allows us to center with margin: auto.
Of course, guessing at the correct width is impossible. Using display: table on the block makes the block "shrink-wrap" around its content, so we don't need to know its width.