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

# we finally learned to center a div, then browsers added sidebars Source: [http://seg6.space/posts/center-div/](http://seg6.space/posts/center-div/) 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\. 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**](https://github.com/seg6/center-div)\. It tries to find the centered element itself; if it guesses wrong, I can pick one\. The[demo](https://seg6.space/center-div/)is the simplest place to see the difference\.