The Potter's Centering: On the Initial Struggle for Visual Stability

There’s a moment at the potter’s wheel, just after the lump of clay is slapped onto the batt, that defines everything that follows. The wheel spins, and the potter’s wet hands envelop the mound, applying pressure. At first, the clay wobbles, fights back, threatening to fly off entirely. It is an unruly, unstable mass. The potter’s entire focus is on this single, critical task: centering. Without a perfectly centered piece of clay, no vessel can be raised; the walls will be uneven, the form will be weak, and the entire endeavor is doomed to collapse.

This initial battle for centering is a perfect analogue for the first crucial moments a web page loads. The moment a user clicks a link, the ‘wheel’ begins to spin. The browser engine slaps the initial HTML, CSS, and resources onto its batt. And like the uncentered clay, the page is at its most volatile. This is the domain of Largest Contentful Paint (LCP) and, more subtly, the initial Cumulative Layout Shift (CLS). The page is a wobbling mess of unstyled content, unloaded images, and asynchronous scripts jostling for position. The user sees a flash of unstyled text, a navigation bar that snaps into place, a hero image that suddenly appears and pushes the entire narrative of the page downwards.

The potter knows that centering isn’t about brute force; it’s about consistent, patient, and informed pressure. You don’t just shove the clay into submission. You work with its natural tendencies, guiding it to a point of equilibrium. Similarly, achieving visual stability on the web isn’t about locking everything down with fixed pixel dimensions. That’s the brute force approach, which shatters the moment the wheel’s speed changes—or in our case, the viewport resizes. True centering for the web is about providing the necessary constraints from the very start.

Providing the Armature

This is where the craft comes in. A potter might use a rib tool to support the clay from the outside as it rises. On the web, our ribs are `width` and `height` attributes on images, aspect ratio boxes for dynamic content, and reserved space for web fonts. They are the structural promises we make to the browser about the space an element will occupy. When we omit these attributes, it’s like the potter taking their hands off the clay just as it begins to hold its shape. The browser renders the page, sees an image with no defined dimensions, and assumes it takes up zero space. Then, when the image finally loads, the browser has to violently recalculate the entire layout to accommodate it, shoving content down the page. The user’s reading focus is broken; the centered vessel wobbles off-axis.

The goal is not to prevent the clay from moving at all, but to guide its movement into a stable, intended form. We accept that the DOM will change, that components will render, that data will flow in. Our job is to ensure that this dance of content happens within a known and stable frame. By acknowledging the inherent instability of the initial loading phase and applying the gentle, consistent pressure of good front-end practice—dimension declarations, CSS containment, strategic loading—we can center our pages. We guide them from a chaotic wobble to a stable, spinning form, ready for the user to engage with, without the ever-present fear of the whole thing coming apart in their hands.

Notes & further reading

A few pages I came back to while writing this: