We need to talk about CSS Centering. For more than ten years, WordPress developers reached for Flexbox or CSS Grid the moment an element had to sit in the middle. Both are good tools, but we got into the habit of over-engineering simple layouts with them. On top of that, we leaned on “magic numbers” and negative margins to paper over the way fonts render.
That has changed in 2026. The properties we have now give you cleaner, faster layouts that make sense when you read them, without the “hacky” workarounds of earlier years. If you still use transform: translate(-50%, -50%) on absolute elements, you’re writing legacy code. Here’s how I’d build it today.
Block-level CSS centering
The biggest change is how far the align-content property now reaches. It used to apply only to multi-line flex containers and grid layouts. Browsers now support align-content: center on ordinary block-level elements, which is good for performance: you no longer have to change the display property just to center something vertically.
/* The Naive, Legacy Way */
.container {
display: flex;
align-items: center;
justify-content: center;
}
/* The Modern, Pragmatic Way (2026) */
.container {
display: block;
align-content: center;
justify-items: center; /* Supported in modern browsers for blocks */
}Keeping the container as a block skips the flex formatting context, so the browser has less to do during reflow. If you’re building staggered layouts, my guide on avoiding staggered layout hacks is worth a read too.
Fixing the typography “vertical jitter”
Ever noticed a button’s text sitting 1px too high even though your CSS Centering is correct? Your code isn’t wrong. The font’s leading and descenders cause it. The fix now is the text-box property, which is part of the CSS Inline Layout Module.
.modern-button {
display: inline-grid;
place-content: center;
text-box: cap alphabetic; /* Trims the white space around the glyphs */
height: 48px;
}This property “trims” the extra space that the font’s metadata adds, so the text ends up centered both by the numbers and to the eye. For more on newer selectors, see modern nth-child updates.
Safe centering: don’t lose content
There’s a story I tell clients a lot about a broken modal on mobile. The developer had used a classic centering hack, and on small viewports it pushed the content off the top of the screen where nobody could reach it. That’s “unsafe” alignment. Modern CSS fixes it with the safe keyword.
.scrollable-center {
display: grid;
place-content: safe center; /* If content overflows, it switches to 'start' to prevent data loss */
}The safe keyword tells the browser: “Center this element, but if it’s too big for the container, don’t let the user lose access to the top/left parts.” It’s an accessibility fix a lot of developers never think about. The MDN alignment guide has the details.
Anchor positioning for centering against another element
The newest piece of CSS Centering is Anchor Positioning. When you need to center an element relative to another element (a tooltip or a floating menu, say), you don’t need a JavaScript library like Popper.js anymore. The anchor-center value does the work.
.tooltip {
position: absolute;
position-area: top span-all;
justify-self: anchor-center;
}That keeps the tooltip horizontally centered on its anchor, even when the anchor moves. It’s declarative, it holds up, and modern rendering engines handle it well.
If CSS Centering problems are eating your dev hours, I can handle them for you. I’ve been working with WordPress since the 4.x days.
Final takeaway
CSS in 2026 lets you say what you mean instead of hacking around the layout engine. Don’t paste a flexbox snippet just because it “just works.” Know whether your alignment is safe and what rendering context your blocks are in. Your users will notice, and so will your Lighthouse scores.
