今回、与えられたお題は……

• 外部で入力されたテキストを引っ張ってくるので1行の長さは固定できない
• レスポンシブで最大幅も作らない
• 文章が中央揃えは読みづらいので左寄せにしたい
• 他の要素は中央揃えなので文章のブロック自体は中央揃えにしたい

というものです。

ということで用意したコードはこちら。

<div class="parent">
  <div class="target">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br>あいうえおかきくけこさしすせそたちつてとなにぬねの</div>
</div>

.parent {
  text-align: center;
}
.target {
  display: inline-block;
  vertical-align: top;
  text-align: left;
}

（実際のサンプルはCodePenにあります。 https://codepen.io/kaitou1192/pen/JjNLMWp もしよろしければ触って挙動etc.を確認してみてください。）

きっと最大幅があるという状況であれば、max-width と margin: 0 auto; とかでセンタリングするという手を、すぐに思いついた気がしますが、幅を完全によしなに…… だと margin: 0 auto; が禁じ手になります。

今回は、対象となる div.target に display: inline-block; を指定し、親要素に text-align: center; を指定することによって中央揃え。ただ、このままだと div.target の内部も中央揃えになってしまうので text-align: left; を指定して、あらためて左寄せにしています。

実はこれ、いにしえのtableレイアウトだとすぐできてしまうものなんですが、今のHTMLとCSSで書こうとすると便利なものが揃っているので、逆に思いつかないというパターンですね。 😎

---

2021年9月11日追記

せっかくなのでtableレイアウトだとどう書くのか？というサンプルも貼っておきます。
CodePen → https://codepen.io/kaitou1192/pen/5e53cb5767c791d03b0efdd19466f20e

<table align="center">
  <tr>
    <td>あいうえお<br>あいうえおかきくけこ<br>あいうえおかきくけこさしすせそ<br>あいうえおかきくけこさしすせそたちつてと<br>あいうえおかきくけこさしすせそたちつてとなにぬねの<br>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ</td>
  </tr>
</table>
<table align="center">
  <tr>
    <td>あいうえお<br>あいうえおかきくけこ<br>あいうえおかきくけこさしすせそ<br>あいうえおかきくけこさしすせそたちつてと</td>
  </tr>
</table>

この table の align は、非推奨なのと、tableでレイアウトを制御するというのはそもそもhtml的にどうなの？という問題もあるので、現在使う必要はないのですが、JSどころかCSSも使わずに書くこともできます。
align="center" は、table に margin: 0 auto; を設定することでも同様の表示をすることも可能で、table　と同じような表示を他のタグでやりたい場合は display: table; と、その仲間たちを使うことでも実現可能です。
（tableタグについて詳しく知りたい方は こちら をご確認ください。display: table; と、その仲間たちに関してはそのうちちゃんとまとめるかも。）