Center

Fission

Product

▾

Setup

›

›

Center is a thin convenience wrapper around Align.

It exists for readability. When you want to center one child and nothing more, Center makes that intent obvious without exposing the lower-level struct directly.

Use it for empty states, spinners, single cards, or onboarding messages. Do not use it when you need multiple children or when you need more explicit positioning behavior.

Example

use fission::prelude::*;

let widget: Widget = Center {
    child: Text::new("Loading...").into(),
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
child	Widget	The widget to center in the available space.	Required. Center has no extra alignment fields of its own.

Behavior and advice

Because Center simply builds an Align, it shares the same layout behavior: it fills bounded parent space and centers the child inside that space, while falling back to the child's size on unbounded axes.

Choose Center when you want the most direct way to say "put this in the middle." Choose Container when styling is also part of the job, and choose Row or Column when sibling layout matters.

Production checklist

For Center, review the fields that change behavior before treating the widget as finished: child. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Center setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Align, Container, and Spacer.