# center

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

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

A zero-argument convenience pattern that centers content both ways.
Composes `u.flex()`, `u.items("center")`, and `u.justify("center")`, so its
output is exactly the declarations those three produce.

## 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:

```tsx
<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:

```tsx
<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.

```ts
u.hover(u.center())
```

## Responsive design

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

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

## Signature

```ts
u.center()
```