we finally learned to center a div, then browsers added sidebars

The challenge of centering a div in web design has evolved over time. Traditionally, it required a specific process, but modern browsers have made the task much simpler. The <source> material details how the page author attempts to center the .site div within a browser window that also contains a sidebar.

Initially, the .site div was center-aligned, but this positioning was relative to a smaller webview instead of the full browser window. The sidebar's presence caused the div to appear misaligned. The author discovered that by calculating the difference in width between the webview and the browser window, and adjusting the position of the div accordingly, they could achieve a true center alignment.

However, the fix proved to be incomplete. When the developer opened the browser's DevTools, the sidebar's position changed. Now, the width difference included the browser user interface on both sides, leading to an inaccurate calculation. The author found a solution by using the pointer's position. By determining where the pointer is both on the screen and within the webview, they were able to accurately position the webview inside the window.

The author developed a browser extension named "center" that attempts to locate the centered element itself. If it makes a wrong guess, the user can manually select the element. The extension operates as an opt-in feature, allowing users to choose whether to enable the centering behavior. The demo showcases the difference in alignment when compared to a site that deliberately centers a narrow layout.