How to center "text-align: left" when wrapping text? - html

Question

I am looking for a way in which my title text is always centered but letting it wrap on the left instead of the center, here's my markup so far:
.title-container {
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-image: linear-gradient(#900, #990);
}
.title-container__text {
flex: 0 1 auto;
font-size: 80px;
color: #ddf;
}
<div class="title-container">
<h1 class="title-container__text">Gran Teatro Sara</h1>
</div>
This maintains the text centered up until the point where the screen size is too small and the text has to wrap, once it wraps the whole text aligns to the left and leaves a big space on the right... I would like to maintain the text wrapping like this, but to have equal space both on the left and the right.
I hope I made myself clear.
I'll explain myself with some visuals, the current behavior of the centering and wrapping goes like so:
The above example works just fine when viewing from big screen sizes
When the screen gets smaller the text wraps as I want, but the text stop being centered. My desired outcome goes like so:

Answer 1

One solution could be to add gutters on either side with flex: 1 and a max-width of your choosing – pixels or percentage, as in this snippet:
.title-container {
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
flex-direction: row;
background-image: linear-gradient(#900, #990);
}
.title-container__text {
flex: 1;
font-size: 80px;
color: #ddf;
}
.gutter {
flex: 1;
max-width: 10%
}
<div class="title-container">
<div class="gutter"></div>
<div class="title-container__text">Gran Teatro Sara</div>
<div class="gutter"></div>
</div>

Answer 2

Add "text-align: center;" to your .title-container CSS.
.title-container {
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
background-image: linear-gradient(#900, #990);
}
.title-container__text {
flex: 0 1 auto;
font-size: 80px;
color: #ddf;
}
<div class="title-container">
<h1 class="title-container__text">Gran Teatro Sara</h1>
</div>