We finally learned to center a div, then browsers added sidebars
A developer explores the technical challenges of centering web elements when browser sidebars and UI elements shift the viewport. The article details a workaround using pointer events to calculate the true center of the browser window.
Why it matters
It highlights the ongoing friction between modern CSS layout standards and the unpredictable nature of browser-specific UI chrome.
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:
Get smarter about the news
Sign up free for a feed built around what you actually care about, Dive Deeper research on any story, and the full text of every article.
Create free accountAlready have an account? Sign in