--- title: we finally learned to center a div, then browsers added... description: Centering a div with modern CSS is easy, but browser sidebars and DevTools docking shift the visible viewport, making the element appear off-center. Using... canonical: https://daily.dev/posts/we-finally-learned-to-center-a-div-then-browsers-added-sidebars-ehrewltuh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: we finally learned to center a div, then browsers added sidebars | daily.dev og:description: Centering a div with modern CSS is easy, but browser sidebars and DevTools docking shift the visible viewport, making the element appear off-center. Using... og:url: https://daily.dev/posts/we-finally-learned-to-center-a-div-then-browsers-added-sidebars-ehrewltuh og:image: https://api.daily.dev/og/posts/ehReWLtUh.png og:image:alt: we finally learned to center a div, then browsers added sidebars og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # we finally learned to center a div, then browsers added sidebars **[Hacker News](https://daily.dev/sources/hn)** · 2 min read · 8 upvotes · 5 comments ## Summary Centering a div with modern CSS is easy, but browser sidebars and DevTools docking shift the visible viewport, making the element appear off-center. Using pointer events to detect the webview's position within the browser window — via screenX, clientX, and scale — allows calculating the correct offset. Firefox exposes viewport position directly; Chromium requires the pointer-based workaround. The author also built a browser extension called 'center, actually' that applies this fix to any page. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does a perfectly centered div look off-center when a browser sidebar is open? CSS centering like grid place-items: center only centers an element within the visible webview, not the full browser window. When a sidebar (such as a reading panel) takes up part of the window, the webview itself is shifted, so the div stays centered in the wrong rectangle. Fixing it requires knowing how much of the window width is sidebar versus webview. _Layout edge cases like this are exactly what frontend developers track down on daily.dev._ ### How can I detect the offset between the browser window and the webview in JavaScript? Subtracting window.innerWidth from window.outerWidth gives the total browser chrome width, but not how it is split between left and right sides, which breaks once DevTools is docked. A more reliable method uses a trusted pointer event's screenX and clientX properties to calculate the webview's exact position within the window, since Firefox exposes this directly while Chromium requires correcting the estimate after the first pointer move. _Developers debugging viewport quirks across browsers compare these tricks on daily.dev._ ## Community take How the wider developer community reacted, aggregated from 2 discussions and 72 comments across lobsters, hackernews (as of 2026-09-13). **TL;DR:** The community is largely skeptical of the approach, arguing that centering relative to the browser window rather than the viewport is the wrong mental model and creates real UX problems; the author acknowledged some of the criticism and reverted the behavior from their blog, keeping it only as an opt-in extension. **Sentiment:** 15% positive · 25% mixed · 60% skeptical **The case for** - The pointer-event trick for detecting webview position within the browser window is considered a clever hack. - Keeping the fix as a browser extension rather than baked into a site is seen as the right call after community feedback. **The pushback** - Centering relative to the browser window rather than the viewport is widely considered the wrong behavior — the viewport is the correct reference frame for web content. - The approach can cause content to be covered by the sidebar or pushed off-screen, both of which are worse than the original problem. - Websites should not need to reverse-engineer browser/OS state outside the viewport; this sets a bad precedent for web compatibility. - The implementation causes a visible flicker and has concurrency bugs when toggling the sidebar repeatedly. - The assumption that the browser window is centered on the screen (and the screen is centered in front of the user) is not valid for tiled or non-maximized windows. **By community** - lobsters (mixed): Discussion is minor and mostly clarifies that the traditional horizontal-centering idiom is margin:auto, not the absolute+transform trick the post references. - hackernews (skeptical): Strong consensus that centering to the browser window instead of the viewport is the wrong design; the author ultimately agreed and reverted the site behavior, keeping only the extension. **Hottest debate:** Whether the viewport or the physical browser window is the correct reference frame for 'centering' web content. **Open questions** - Does this approach work correctly with vertical tabs in Firefox? - Should browsers expose viewport-position APIs to web pages at all, given the potential for misuse? - Is there a pure-CSS solution (e.g. scrollbar-gutter) that addresses the sidebar-offset problem without JavaScript? **Highlights** > As a rule, you should not add functionality to a website to compensate for browser misfeatures. People who want the browser to work differently can get a different browser: that's why we call them "user agents". Making the web all complicated like this mainly serves to make it harder for people to use alternative browsers, or for browsers to change their misfeatures without breaking compatibility. > — [wizzwizz4 on hackernews · 1 comments](https://news.ycombinator.com/item?id=49176938) > Fair enough, that criticism resonates. I've decided to keep this behaviour only in the extension and have reverted it from the blog. Thanks! > — [seg6 on hackernews · 1 comments](https://news.ycombinator.com/item?id=49177325) > The net result of what this site is doing seems to result in one of two effects when I open the sidebar, randomly: 1) the sidebar covers the content, while the content has blank space to the right, or 2) the content moves off the right edge of the screen, leaving a large blank space to its left. Both of these are wrong. If I have a sidebar open, the site is now narrower, stop trying to be clever. My immediate reaction to this is why is the browser giving the site this information, and could we stop. > — [JoshTriplett on hackernews · 1 comments](https://news.ycombinator.com/item?id=49176894) > This is a nonsensical goal. If I drag a browser window to the right, making it cover the right-hand half of my monitor, it serves no useful purpose for "centered" content to migrate to the left edge of the window (the physical midpoint of the screen). Centered means centered within the virtual viewport, not the physical screen. > — [Borealid on hackernews](https://news.ycombinator.com/item?id=49177686) > Screenshots would be helpful, because (you may be surprised to learn that) it is not entirely obvious which mode of behavior is supposed to be "wrong". Anyway, I wouldn't say it currently behaves nicely (like something I would like to reuse anywhere whatsoever). Tested on Firefox opening Bookmarks on the left. First off, there is this ugly flicker, as browser first renders the "wrong" version, then your JS "fixes" it. Second, there is some concurrency problem, as by opening and closing Bookmarks repeatedly I somehow managed to render both versions: centered to viewport and covered by sidebar. And, yeah, as others have said, I also think that allowing sidebar to cover your webpage content is absolutely bogus and don't foresee myself wanting this behavior, ever. But that's up to you. > — [krick on hackernews · 1 comments](https://news.ycombinator.com/item?id=49176868) **Source threads** - [lobsters](https://lobste.rs/s/ikkudb/we_finally_learned_center_div_then) · 1 points · 3 comments - [hackernews](https://news.ycombinator.com/item?id=49176055) · 74 points · 69 comments ## Community discussion Top comments from developers on daily.dev. **@nerdalytics** · 1 upvotes > Not sure if this is a floating sidebar or a toggled permanent sidebar. In Arc I never noticed content shift. **@vineyrawat** · 0 upvotes >  **@yaireo** · 0 upvotes > what is this term "sidebars"? You mean "scrollbars"? ## Similar posts on daily.dev - [The root scroller and how not to lose it](https://daily.dev/posts/the-root-scroller-and-how-not-to-lose-it-ujk7eemn1) · Polypane · 0 upvotes · 0 comments - [CSS Layout: How To ‘Center a Div,’ the Old School Way](https://daily.dev/posts/css-layout-how-to-center-a-div-the-old-school-way-imei5joye) · The New Stack · 1 upvotes · 0 comments - [Using 100vw is now scrollbar-aware \(in Chrome 145\+, under the right conditions\)](https://daily.dev/posts/using-100vw-is-now-scrollbar-aware-in-chrome-145-under-the-right-conditions--52isi4cnv) · Bram.us · 0 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/we-finally-learned-to-center-a-div-then-browsers-added-sidebars-ehrewltuh) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"we finally learned to center a div, then browsers added sidebars","url":"https://daily.dev/posts/we-finally-learned-to-center-a-div-then-browsers-added-sidebars-ehrewltuh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/we-finally-learned-to-center-a-div-then-browsers-added-sidebars-ehrewltuh"},"datePublished":"2026-08-04T23:46:06.962Z","dateModified":"2026-09-13T18:54:09.372Z","description":"Centering a div with modern CSS is easy, but browser sidebars and DevTools docking shift the visible viewport, making the element appear off-center. Using...","image":"https://media.daily.dev/image/upload/s--1KxV4ohY--/f_auto/v1722860400/public/Placeholder%2007","thumbnailUrl":"https://media.daily.dev/image/upload/s--1KxV4ohY--/f_auto/v1722860400/public/Placeholder%2007","isAccessibleForFree":true,"articleSection":"Hacker News","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Hacker News","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/hn","url":"https://daily.dev/sources/hn"},"commentCount":5,"discussionUrl":"https://daily.dev/posts/we-finally-learned-to-center-a-div-then-browsers-added-sidebars-ehrewltuh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":8},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":5}],"keywords":"javascript,css","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hacker News","item":"https://daily.dev/sources/hn"},{"@type":"ListItem","position":3,"name":"we finally learned to center a div, then browsers added sidebars"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/we-finally-learned-to-center-a-div-then-browsers-added-sidebars-ehrewltuh","comment":[{"@type":"Comment","text":"Not sure if this is a floating sidebar or a toggled permanent sidebar. In Arc I never noticed content shift.","datePublished":"2026-08-07T16:47:41.701Z","url":"https://daily.dev/posts/ehReWLtUh#c-PoRZIvuyR","author":{"@type":"Person","name":"nerdalytics","url":"https://daily.dev/nerdalytics","image":"https://avatars.githubusercontent.com/u/97166791?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"","datePublished":"2026-08-06T10:12:45.260Z","url":"https://daily.dev/posts/ehReWLtUh#c-c5fOqHVnZ","author":{"@type":"Person","name":"Vinay Rawat","url":"https://daily.dev/vineyrawat","image":"https://media.daily.dev/image/upload/s--SLeRKIdd--/f_auto/v1781461357/avatars/avatar_xcqEhJE2i?_a=BAMAMiWQ0"}},{"@type":"Comment","text":"what is this term “sidebars”? You mean “scrollbars”?","datePublished":"2026-08-05T07:58:14.213Z","url":"https://daily.dev/posts/ehReWLtUh#c-JbJXH7cdd","author":{"@type":"Person","name":"Yair Even Or","url":"https://daily.dev/yaireo","image":"https://avatars.githubusercontent.com/u/845031?v=4"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/we-finally-learned-to-center-a-div-then-browsers-added-sidebars-ehrewltuh#faq","mainEntity":[{"@type":"Question","name":"Why does a perfectly centered div look off-center when a browser sidebar is open?","acceptedAnswer":{"@type":"Answer","text":"CSS centering like grid place-items: center only centers an element within the visible webview, not the full browser window. When a sidebar (such as a reading panel) takes up part of the window, the webview itself is shifted, so the div stays centered in the wrong rectangle. Fixing it requires knowing how much of the window width is sidebar versus webview. Layout edge cases like this are exactly what frontend developers track down on daily.dev."}},{"@type":"Question","name":"How can I detect the offset between the browser window and the webview in JavaScript?","acceptedAnswer":{"@type":"Answer","text":"Subtracting window.innerWidth from window.outerWidth gives the total browser chrome width, but not how it is split between left and right sides, which breaks once DevTools is docked. A more reliable method uses a trusted pointer event's screenX and clientX properties to calculate the webview's exact position within the window, since Firefox exposes this directly while Chromium requires correcting the estimate after the first pointer move. Developers debugging viewport quirks across browsers compare these tricks on daily.dev."}}]} ```