Vertically Center Text in CSS with text-box-trim
Vertical text centering without padding hacks
Text always looked optically off-center because font metrics include extra space for ascenders and descenders. The text-box property trims that invisible space for true visual centering.
.btn { display: inline-flex; align-items: center; padding: 10px 20px; padding-top: 8px;}.btn { padding: 10px 20px; text-box: trim-both cap alphabetic;}text box Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
True centering
Trims invisible font metric space above cap height and below alphabetic baseline. Math and optics finally agree.
Works everywhere
Buttons, badges, tags, headings, pills. Anywhere text looked subtly off-center now looks perfect.
Font-agnostic
The browser reads the font's actual metrics. Switching fonts doesn't break the centering.
How it works
Every font has internal metrics: ascent (space above for accents) and descent (space below for descenders like g and y). When you center text in a button or container, the browser centers the full content box including these invisible metrics. The visual center of the actual letters ends up slightly too low.
The text-box shorthand combines text-box-trim and text-box-edge. Using trim-both trims above and below, while cap alphabetic sets the trim edges to the cap height (top of capital letters) and alphabetic baseline. The result: the visible text is truly centered within its container, regardless of font or size.