We Finally Learned to Center a Div, Then Browsers Added Sidebars

Introduction: The Evolution of Centering a Div

For years, centering a div was a rite of passage for every web developer. We all remember the magic formula:

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

It wasn't intuitive, but it worked. Then came modern CSS with more elegant solutions like display: grid and place-items: center. Yet, just as we thought we had cracked the code, browsers introduced a new hurdle: sidebars.

The Sidebar Problem

With sidebars, centering a div is no longer straightforward. The visible browser space (webview) is not always centered in the whole browser window. This means elements that are supposed to be perfectly centered might appear offset.

Let's take a concrete example. Suppose you use a browser with an open sidebar. You have a div that's supposed to be centered, but it appears off-center because it's centered relative to the visible space, not the entire window.

A JavaScript Solution

To solve this issue, we can use JavaScript to dynamically adjust the div's position. Here's an example of how this can work:

``javascript const browserChrome = window.outerWidth - window.innerWidth; const shift = -browserChrome / 2; .site { translate: var(--window-center-shift, 0px); } ``

This method adjusts the position to compensate for the sidebar's width. However, this solution is not without its flaws. For instance, opening DevTools can further complicate positioning.

The Challenge of DevTools

When DevTools are open, especially if docked on the right, the width difference includes browser UI on both sides. This complicates the exact calculation needed to properly center the div.

Using Pointer Events

A more advanced solution is to use pointer events to determine the exact position of the webview within the browser window. This allows for dynamic positioning correction:

``javascript 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); ``

This method allows for greater precision, especially with Firefox, which directly exposes the webview position.

Conclusion: Adapting to New Realities

Centering a div has become more complex with browser evolutions. However, through clever JavaScript solutions and the use of pointer events, maintaining a harmonious layout is achievable.

Let's discuss your project in 15 minutes.