Centering a div used to require this little ritual:

.thing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

These days, it is almost disappointingly easy:

body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
}

I used that for the .site div you’re reading. It looked centered until I opened it in a browser with the sidebar visible.

The .site div was still perfectly centered, just inside the wrong rectangle. I figured the fix would be simple enough: JavaScript knows the width of both the webview and the browser window.

window.innerWidth // the webview
window.outerWidth // the whole browser window
const browserChrome = window.outerWidth - window.innerWidth;

With the sidebar on the left, I could move .site back by half of that difference:

const shift = -browserChrome / 2;

.site {
  translate: var(--window-center-shift, 0px);
}

That worked, right up until I opened DevTools.

devtools ruins the easy fix

Mine is docked on the right, so the width difference now included browser UI on both sides. It gave me the total, but no way to tell how that total was split.

What finally gave me the missing coordinate was the pointer. A trusted pointer event knows where it is on the screen and where it is inside the webview, which is enough to locate the webview inside the window:

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 exposes the same viewport position directly. Chromium does not, so this site starts with the left-sidebar estimate and corrects it as soon as the pointer enters the page.

center, actually

I wanted to try the same fix on pages I do not control, so I made center, actually. It tries to find the centered element itself; if it guesses wrong, I can pick one. The demo is the simplest place to see the difference.