Center with writing-mode trick
Use writing-mode: vertical-lr and text-align: center to center elements — a lesser-known CSS trick that works without flexbox or grid.
Text Block
Centered
Quick implementation
/*
HTML Structure:
<div class="wm-center-outer">
<div class="wm-center-inner">Content</div>
</div>
*/
.wm-center-outer {
/* 1. Rotate the flow axis */
writing-mode: vertical-lr;
/* 2. Center the inline content along the new block axis */
text-align: center;
/* Container dimensions */
width: 100%;
height: 100px;
background-color: var(--card);
border: 1px solid var(--card-border);
}
.wm-center-inner {
/* 3. Reset flow axis for the child so text reads normally */
writing-mode: horizontal-tb;
/* 4. Make it inline-block so text-align affects it */
display: inline-block;
/* Styling */
background-color: var(--accent);
color: oklch(0.2 0.02 265);
padding: 0.5rem 1rem;
border-radius: 4px;
}Prompt this to your LLM
Includes role, constraints, and framework variants.
Role: CSS layout engineer.
Goal: Center elements using writing-mode trick as an alternative to flexbox.
Constraints:
1. Use writing-mode: vertical-lr on the parent container.
2. Use text-align: center on the parent to center the child.
3. Reset the child element with writing-mode: horizontal-tb.
4. Ensure child is display: inline-block.
5. Use oklch() for all color values.
Variants:
A) Vanilla CSS class (.wm-center-outer).
B) Tailwind utility classes (writing-vertical-lr text-center).
Edge Cases:
1. RTL language implications (vertical-rl vs vertical-lr).
2. Inline-block vs block display on child element.
3. Safari older versions support for writing-mode.Why this matters in 2026
While Flexbox and Grid are the modern standards, the writing-mode trick remains a fascinating piece of CSS history and a useful fallback for legacy systems. It demonstrates how changing the block formatting context can repurpose properties like text-align to solve layout problems without extra markup or complex calculations.
The logic
The logic relies on the definition of text-align. It aligns inline content along the inline axis. By setting writing-mode: vertical-lr, the inline axis becomes vertical. Therefore, text-align: center centers the content vertically. We then reset the child's writing mode to horizontal-tb so the text inside the child reads normally.
Accessibility & performance
Accessibility is generally unaffected; screen readers read the text exactly the same regardless of visual styling. Since this is a layout change, it does not impact the reading order. Performance is excellent because writing-mode changes paint only, avoiding reflow risks associated with JavaScript-based centering.