When I specify text-align:center for an element with a width that is greater than the width of the text, the text is centered within the content box of the elem
Strange requirement. I would expand the boxes to the texts size.
One possible solution might involve a negative text-indent: text-indent: -50px;, but that won't work for smaller texts (first DIV in your example). No better idea here right now.