div のセンタリング、ブラウザのサイドバーで台無しに――JavaScriptで真の中央配置を実現

要約

CSS グリッドで div をセンタリングする方法は進化したが、ブラウザのサイドバーが表示されると、セン タリングが webview 内で行われるため、ウィンドウ全体の中央ではなくなる。著者は JavaScript で window.innerWidth と window.outerWidth の差を計算し、シフト値を動的に調整する方式を考案した。しかしDevTools が両側に UI を追加すると座標計算が複雑化したため、ポインタイベントの screenX と clientX から webview のウィンドウ内位置を逆算する手法に切り替えた。最終的には「center, actually」というブラウザ拡張にまとめ、ユーザーが opt-in で真の中央配置を選べる仕組みとした。