Friday, October 23, 2026|20°C Partly Cloudy
Next edition scheduled
Your Personal Daily Intelligence
Edition 2026-08-05

TECHNOLOGY

Centering a Div Adjusts for Browser Sidebars

Centering a div element inside a browser window that contains sidebars can be difficult when the sidebar reduces the visible width.

By Hacker News · 80d ago · Source: Hacker News

Full article

Centering a div element inside a browser window that contains sidebars can be difficult when the sidebar reduces the visible width. Traditional CSS centering uses position absolute with a transform translate, while modern layouts use CSS grid’s place-items property to center content. The developer described a JavaScript method that measures the difference between the browser’s outer width and the webview’s inner width, calculates half of that difference, and applies a CSS translation to shift the element. For a sidebar positioned on the left, the shift value is half the difference between outer width and inner width; for a right‑docked sidebar the total difference includes UI elements on both sides, making it difficult to determine how the total is divided. Pointer event coordinates give the position of the cursor inside and outside the webview, which allows calculation of the webview’s location within the window. Firefox exposes the viewport position directly, while Chromium requires an initial assumption about the sidebar position that is adjusted when the pointer enters the page. The utility center, actually, lets users select a centered element and provides an opt‑in preference rather than applying a site‑wide default.

Source transparency

Publisher
Hacker News
Reliability
high
Published
8/5/2026, 10:00:30 AM
Retrieved
8/5/2026, 10:00:30 AM
Relevance
80%
Confidence
85%
Read original at Hacker News

Botwin's Morning Wire publishes the full source article for reading convenience. Please visit the publisher for the original presentation and any updates.