Center

wf-center uses place-items: center on a CSS grid to center content both horizontally and vertically in a single declaration. The container must have a defined height for vertical centering to take effect — without it the grid collapses to content height and there is nothing to center against.

Basic Center

Single Child — Both Axes

Set a height on the container and the child is perfectly centered.

Centered

<div class="wf-center">
  <div>Centered</div>
</div>

Multiple Children

Each Child Centered Horizontally

With multiple children, the grid stacks them in a single column, centering each one horizontally. Vertical centering applies to the entire track.

Item A

Item B — wider content

Item C

<div class="wf-center">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

Vertical Alignment Override

Items Start wf-items-start

Children align to the top while remaining horizontally centered.

Top · Center

<div class="wf-center wf-items-start">
  <div>Top · Center</div>
</div>

Items End wf-items-end

Children align to the bottom while remaining horizontally centered.

Bottom · Center

<div class="wf-center wf-items-end">
  <div>Bottom · Center</div>
</div>

Per-Item Horizontal Override

Justify Self on Individual Children

Use wf-justify-self-* on a child to pull it to the start or end of the row while others remain centered.

justify-self-start

centered (default)

justify-self-end

<div class="wf-center">
  <div class="wf-justify-self-start">start</div>
  <div>centered</div>
  <div class="wf-justify-self-end">end</div>
</div>

Class Reference

All modifier classes available on .wf-center

Class Name	Type	Description
wf-center	Base	CSS grid with place-items: center . Centers all children both axes. Container needs explicit height for vertical centering.
wf-items-start / -end / -stretch	Alignment	Overrides vertical alignment of all children.
wf-justify-self-start / -center / -end / -stretch	Self	Overrides horizontal alignment for a single child item.