Centering HTML elements has evolved dramatically. Years ago, developers relied on a specific pattern combining absolute positioning, top/left offsets, and CSS transforms. Today, CSS Grid makes it trivial: set display: grid, place-items: center, and the element centers itself.
But this simplicity breaks down in practice, according to a developer documenting the issue on seg6.space. When browser sidebars are open, a centered div ends up centered within the webview area—the space left after the sidebar takes its portion—rather than centered in the visible window itself.
The developer encountered this while working on a narrow layout designed to be centered on screen. The .site div was technically centered, just in the wrong rectangle. JavaScript offers the tools to detect this: window.innerWidth measures the webview, while window.outerWidth measures the entire browser window. The difference reveals the browser’s UI width.
The initial fix was straightforward: calculate the sidebar width and shift the centered element back by half that amount using CSS translate. The sidebar still narrows the webview normally, and only the container repositions—content reflows as intended.
This worked until the developer opened DevTools. With developer tools docked to the right, the width difference now included browser UI on both sides. The total was measurable, but there was no way to determine how that total was split between left and right—window.screenX doesn’t exist.
The breakthrough came from using pointer events. A trusted pointer event knows its position both on screen and within the webview. By comparing these two coordinates, the code can calculate exactly where the webview sits within the window:
const viewportLeft = event.screenX - event.clientX * scale;
This gives enough information to compute the correct shift. Firefox exposes viewport position directly through an API; Chromium does not, so the developer’s solution starts with the selected sidebar position and refines it as soon as the user moves the pointer onto the page.
To make the fix available beyond single sites, the developer created “center, actually”—a browser extension that applies the correction to any page. Rather than letting individual sites impose centering choices on all users, the extension makes it opt-in. Users can let the extension auto-detect centered elements or manually select which element should be repositioned.
Key facts
- Modern CSS Grid simplifies centering to a single declaration, but browser sidebars shift the visual center point away from the window center
- Browser width calculations can be made using window.innerWidth and window.outerWidth, though splitting that difference between left and right requires pointer event coordinates
- A trusted pointer event reveals webview position by comparing screenX and clientX values across coordinate systems
- Firefox exposes viewport position directly via API; Chromium requires inferring position from pointer events or sidebar preference