[ @sdxc/u/layout ]

center

A zero-argument convenience pattern that centers content both ways.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { center } from "@sdxc/u/layout";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.center()`	`css({ display: "flex", alignItems: "center", justifyContent: "center" })`

Examples

Basic example

Use center() to place an element's children in its middle, both horizontally and vertically:

center()

<div mix={[center(), is(72), bs(40), ...]}>
	<div mix={[...]}>center()</div>
</div>

Centring initials in an avatar

Combine center() with a fixed size and a full radius to centre initials in an avatar:

SXSXSX

<div mix={[...]}>
	<span
		mix={[
			center(),
			is(10),
			bs(10),
			rounded("full"),
			bg("brand.solid"),
			fg("brand.onSolid"),
			text("sm"),
			weight("semibold"),
		]}
	>
		SX
	</span>
	<span
		mix={[
			center(),
			is(14),
			bs(14),
			rounded("full"),
			bg("brand.solid"),
			fg("brand.onSolid"),
			text("lg"),
			weight("semibold"),
		]}
	>
		SX
	</span>
	<span
		mix={[
			center(),
			is(20),
			bs(20),
			rounded("full"),
			bg("brand.solid"),
			fg("brand.onSolid"),
			text("2xl"),
			weight("semibold"),
		]}
	>
		SX
	</span>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.center())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.center())

Signature

u.center()