The div is centered — the window isn't: fighting browser sidebars with pointer math

Centering an element in CSS, once a position: absolute / translate(-50%, -50%) incantation, is now a one-liner with display: grid and place-items: center. But the author found that “centered” only means centered inside the webview rectangle — open a browser with a sidebar and a deliberately narrow, centered layout drifts off to one side of the actual window. The goal was dead-center relative to the visible window, not the leftover space beside the chrome.

The first fix used JavaScript to subtract window.innerWidth from window.outerWidth to estimate the chrome width, then shift the container back by half. That held up until DevTools opened docked on the right: now chrome existed on both sides, and the width delta gave a total with no way to know the split. The workaround was to lean on a trusted pointer event, which reports both its screen position and its position inside the page — enough to triangulate where the webview actually sits within the window. Firefox exposes the viewport position directly; Chromium doesn’t, so the code seeds a guess and corrects it the moment the pointer enters the page.

The author packaged the technique as a browser extension, “center, actually,” that guesses the centered element on pages it doesn’t control (with manual override). The framing is the interesting part: this centering preference belongs to the reader as an opt-in, not something a site imposes on everyone — a small argument for user-side control over layout.