Horizontally center text within a div - css

Question

I observe that text-align: center, while creating equal space around the left and right of the text from its container block element's boundaries (div in this case), also changes the alignment of the text to center. In this, it violates the Single Responsibility Principal.
With text-align: center
div {
box-sizing: border-box;
width: 600px;
height: 500px;
border: 4px solid red;
padding: 0 150px 0 150px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div>This is a long piece of text that runs into many lines of reading. Some people like to sleep, and some like to drink water. This is looking like a poem. It is even aligned like one. What a pity!</div>
A few things to note for the casual reader:
I am not asking how to vertically align text.
I know I can do what I want if I took a div within a div. I am not asking for alternate solutions to a problem I am trying to solve. I am asking if there is a way to do it without resorting to a kludge such as taking a containing div.
With a kludge: taking a div inside a div
body > div {
box-sizing: border-box;
width: 600px;
height: 500px;
border: 4px solid red;
display: table-cell;
vertical-align: middle;
padding: 0 150px 0 150px;
}
div > div {
text-align: justify;
margin: 0 auto;
}
<div>
<div>This is a long piece of text that runs into many lines of reading. Some people like to sleep, and some like to drink water. This is NOT looking like a poem. Oh, so nice! But it uses a hack, what the fack!</div>
<div>
I was wondering if there was a way to horizontally center text within a containing block such as a div while retaining the text alignment to left or justify.

Answer 1

No, there isn't and for a good reason. For if there were to be one such inbuilt solution within the CSS engine itself, without you setting the padding, who would decide how wide the text content must be?
Your best bet is to do what you were already doing. That is, to set the padding on the left and right sides, and to leave text-align: justify (or left as you please). That would do exactly what you wanted.
The problem with the approach that you are thinking of is that you somehow need to define how wide the centered text should be. In you're example you were setting the padding and the width and by that implicitly setting the width that was left for the text in the middle.
The only real solution to making sure that something only takes a predefined with in a container is actually creating a DOM-element for it. This means that you probably can't avoid the extra div here if you do not want to use the padding/width hack.