Why “perfectly centered” looks slightly off.

You center the icon, the inspector confirms the margins match to the pixel — and it still looks wrong. That's not your eyes failing you. Mathematical center and visual center are two different points, and every interface you admire is full of tiny, deliberate lies that reconcile them. This is optical alignment: the least-documented skill separating polished UI from almost-polished UI.

The play button problem

The canonical case. Put a triangle inside a circle and center it by bounding box — equal space left and right. It looks broken: the triangle appears to sag toward the left edge. The geometry explains why. A right-pointing triangle carries most of its area near its flat base on the left; its centroid sits one third of the way along its width, not halfway. Your eye balances that mass against the circle, finds more of it on the left, and reports "off-center" — even though the box math is flawless.

The fix is to nudge the triangle right until it looks centered — typically a few percent of the container's width. Every video player you've ever used does this. You never noticed, which is exactly the point: optical alignment is invisible when present and glaring when absent.

Your eye measures mass, not boxes

Layout engines center rectangles. Eyes balance visual weight — where the dark pixels actually are. For symmetric shapes (a square, a filled circle, the letter O) the two centers coincide and the math just works. For anything asymmetric — triangles, arrows, chevrons, most letterforms, an avatar with a badge — they split apart, and the layout engine confidently picks the wrong one. Optical alignment isn't overriding the rules; it's correcting for the fact that center was computed against the wrong reference.

The bounding box lies about size, too

Two icons "at 24 pixels" are not the same size. A circle touches its bounding box at only four points, so at equal box dimensions it reads noticeably smaller than a square. Material Design's icon grid bakes the correction into the spec: on its 24dp canvas, a square keyline shape is drawn at 18×18dp while a circle gets a 20dp diameter — round shapes are drawn a full 2dp larger so that every icon looks the same size. If a design system that ships thousands of icons needs per-shape sizes to appear uniform, your app mixing icons from two different sets certainly does.

The practical version: when one icon in a toolbar looks small next to its neighbors, scale it up until it looks right and stop worrying that the number is different. A row of icons that measures identical and looks uneven is wrong; a row that measures uneven and looks identical is correct.

Text never sits where you think it does

Vertically centering a button label centers its line box — the full span reserved for ascenders and descenders — not the letters you actually see. A label like "OK" descends nowhere, but the font still reserves descender space below it, so the visible glyphs ride high of true center. That's why button text in a hurried UI so often floats a pixel or two toward the top, and why careful design systems quietly use asymmetric vertical padding to pull it back.

CSS has grown a property aimed at exactly this — text-box-trim, which cuts the reserved space above and below the visible text — but check current browser support before leaning on it. Everywhere else, the fix is the same as the play button: nudge by a pixel or two until the label sits where the eye expects it.

Round shapes need to overshoot

Type designers solved this centuries before screens. In nearly every typeface, the O is drawn slightly taller than the H — it pokes a hair past both the baseline and the cap line, because a curve that only kisses a boundary looks like it falls short of it. The practice is called overshoot, and UI inherits it directly: a circular avatar sitting beside a square card at mathematically equal heights will read smaller. Give the circle a couple of extra pixels and the pair snaps into agreement.

The same family of tricks includes hanging punctuation: when a headline opens with a quotation mark, typesetters push the mark outside the margin so the first letter — not the punctuation — aligns with the text below. Measured, the line starts early. Seen, the edge is finally straight.

How to see what your eye is telling you

The frustrating part of optical alignment is that you sense the problem before you can name it. A few techniques turn the vague "something's off" into a diagnosis:

Squint. Blurring your vision discards detail but keeps mass, and imbalance pops immediately. Flip it. Mirror the design horizontally — painters have done this for centuries because errors your eye has adapted to become obvious in reverse. Zoom out, not in. Centering is judged against the whole composition, so thumbnails expose what a 400% zoom hides. And always check on the actual device at arm's length — the distance your users will actually judge it from.

Shipping it without a fight

The inspector is a starting point, not a verdict. When something measures right and looks wrong, the measurement is what's wrong. Commit the nudge — and leave a comment like "optically centered — don't equalize," or the next well-meaning refactor will "fix" your two pixels straight back into the bug. Asymmetric padding isn't a code smell; at this scale it's a craft mark.

Keep the corrections proportionate. Optical adjustments at UI scale are one-to-three pixel moves, or a couple of percent of the container. If you find yourself nudging something ten pixels to make it look centered, the problem is elsewhere — usually an asset with baked-in whitespace or a container measuring something you didn't intend.

Where we sweat this so you don't

Store screenshots are an optical-alignment minefield: a headline centered above an angled device frame, a frame whose shadow drags visual mass sideways, captions balanced against a notch. The templates in ShotCanvas carry these corrections already — headline, device, and background relationships tuned by eye, not just by math — so your set looks balanced at thumbnail size, where installs actually happen.