LayoutLayout8 props
Center
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.
공식 문서 열기Preview
Centered content
Import
import {Center} from '@astryxdesign/core/Center';Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.
When to use
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.
centercenteredcenteringalignalignmentjustifyflexboxmiddle
Important props
axisboth | horizontal | verticaloptional
Theming targets
astryx-center
Best practices
- DoUse axis="horizontal" or axis="vertical" when you only need one direction. Both axes is the default but not always needed.
- DoSet a height when centering vertically. Center needs a defined height to know what space to center within.
- DoUse isInline to center small elements like icons or badges within a line of text without breaking the text flow.
- Do notWrap large page sections in Center. Use Layout or AppShell for page-level structure.