文字を中央揃えにする

実現したいこと

divタグをposition-absoluteで丸の中に配置しています。
数字が二桁になっても文字がその丸のなかの中央に配置されるようにしたいです。

発生している問題・分からないこと

数字が二桁になったときにも文字を中央に配置する意味が分からない。

該当のソースコード

<div class="text-overlay text-position1">11</div> .text-overlay.text-position1 { left: 330px; top: 177px; color: #7ac7ff; } .text-overlay { position: absolute; font-size: 42px; font-family: "Noto Sans JP"; font-weight: 800; word-wrap: break-word; }

試したこと・調べたこと

上記の詳細・結果

ChatGPTで調べましたが、それを実現する方法が返ってきませんでした

補足

特になし