Center aligns content to the middle of its container. Use it for empty states, loading screens, login forms, or any content that should sit in the center of the available space.
ts
import{XDSCenter}from'@xds/core/Center'
Best practices
Guidance
Practices
Do
Use axis="horizontal" or axis="vertical" when you only need one direction — both axes is the default but not always needed.
Do
Set a height when centering vertically — Center needs a defined height to know what space to center within.
Do
Use isInline to center small elements like icons or badges within a line of text without breaking the text flow.
Don't
Wrap large page sections in Center — use XDSLayout or XDSAppShell for page-level structure.
Don't
Use Center for horizontal lists of items — use XDSStack with hAlign="center" instead.
Examples
Common configurations, variations, and states.
Center — Horizontal Center
An editor toolbar with a document title on the left and formatting actions on the right. This shows axis=