Centering a Div with Browser Sidebars and DevTools Open

The Challenge of Centering

Centering a div element on a webpage has evolved from complex CSS rituals to simpler modern methods using CSS Grid. However, this simplicity is challenged when browser sidebars or developer tools are active, as they alter the perceived center of the display area.

Initial Attempts and Limitations

An initial approach involves using JavaScript's window.innerWidth and window.outerWidth to calculate the browser chrome width. This allows for a compensatory shift to re-center the div. This method works until developer tools are opened, especially when docked, as they introduce additional, unquantifiable chrome on one or both sides, making the simple calculation insufficient.

Leveraging Pointer Events for Accuracy

To overcome the limitations of window width properties, the solution utilizes pointer events. A trusted pointer event provides both screen coordinates (event.screenX) and coordinates within the webview (event.clientX). By combining these with window.screenX and window.outerWidth, the precise left and right boundaries of the webview within the browser window can be determined. This allows for an accurate calculation of the necessary shift to center the div.

Browser-Specific Implementations

Firefox directly exposes the viewport position, simplifying the process. Chromium-based browsers, however, do not. For these, an initial estimate based on a left-sidebar assumption is used, which is then corrected as soon as a pointer event occurs on the page, providing the necessary data for precise centering.

Introducing 'center, actually'

The author developed a tool called 'center, actually' to apply this centering fix to arbitrary web pages. This tool attempts to identify the main centered element and adjust its position. If the automatic detection is incorrect, users can manually select the target element for centering.