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.

This is a fairly specific itch. I use one browser window tiled directly in front of me, usually with its sidebar open. When a site deliberately centers a narrow layout, I want it at the dead center of that window, not the space left over beside the sidebar.

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 .…