Menu

Post image 1
Post image 2
1 / 2
188

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

#seg6#window#const#sidebar#left#article
Reading 0:00
15s threshold

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

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More