CSS でサイズが決められない要素を JavaScript で中央に表示する

サイズの決まっている要素なら下のようにすると中央に表示することができます。

<div id="center">吾輩は猫である。</div>

#center {
    position: absolute;
    width: 600px;
    height: 400px;
    inset: 0;
    margin: auto;
  }

ですが、数文字の文を改行させないように表示するには、厳密には幅を事前に決めておくことができません。改行のある文章は、厳密には高さを事前に決めておくことができません。

JavaScript の出番です。下のようにすると中央に表示できます。

事前に CSS で設定しておくことができないので、JavaScript を使って、ブラウザが算出した要素のサイズを CSS として設定してやります。

inset について事前に CSS として設定しておくと、サイズの決まっていない要素は画面全体に広がってしまいます。 JavaScript でサイズを決定した後で設定してやる必要があります。

#center {
    position: absolute;
    margin: auto;
  }

window.addEventListener("DOMContentLoaded", () => {
    let center = document.getElementById("center")
    center.style.width = center.getBoundingClientRect().width
    center.style.height = center.getBoundingClientRect().height
    center.style.inset = 0
  })