divのセンタリングを習得した途端、ブラウザはサイドバーを追加した

divのセンタリングを習得した途端、ブラウザはサイドバーを追加した div要素を中央揃えするには、かつては次のような短い儀式が必要でした。 .thing { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 最近では、ほとんどがっかりするほど簡単になりました。 body { display: grid; min-height: 100dvh; place-items: center; } 私はこれを、あなたが今読んでいる.site divに使用しました。サイドバーが表示されているブラウザで開くまで、中央揃えされているように見えました。.site divは完全に中央揃えされていましたが、それは間違った長方形の中でのことでした。 修正は十分に簡単だろうと考えました。JavaScriptはウェブビューとブラウザウィンドウの両方の幅を知っています。 window.innerWidth // ウェブビューのウィンドウ window.outerWidth // ブラウザ全体のウィンドウ const browserChrome = window.outerWidth - window.innerWidth; 左側にサイドバーがある場合、その差の半分だけ.siteを移動させることができました。 const shift = -browserChrome / 2; .site { translate: var(--window-center-shift, 0px); } これは機能しましたが、開発者ツールを開くまででした。 開発者ツールが簡単な修正を台無しにする 私のものは右側にドッキングされているため、幅の違いには両側のブラウザUIが含まれるようになりました。合計値は得られましたが、その合計がどのように分割されているかを判断する方法はありませんでした。 最終的に欠けていた座標を与えてくれたのはポインターでした。信頼できるポインターイベントは、それが画面上のどこにあるか、そしてウェブビュー内のどこにあるかを知っており、ウェブビューをウィンドウ内に配置するのに十分です。 const viewportLeft = event.screenX - event.clientX * scale; const viewportRight = viewportLeft + innerWidth * scale; const left = viewportLeft - window.screenX; const right = window.screenX + outerWidth - viewportRight; const shift = (right - left) / (2 * scale); Firefoxは同じビューポート位置を直接公開しています。Chromiumはそうしないため、このサイトは左サイドバーの推定値で開始し、ポインターがページに入るとすぐにそれを修正します。 実際には中央揃え 自分で制御できないページでも同じ修正を試したかったので、actually.centerを作成しました。これは中央揃えされている要素自体を見つけようとします。もし推測が間違っていれば、私が1つを選択できます。デモは違いを見るのに最も簡単な場所です。