전체 카탈로그
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.

공식 문서 열기
live previewLayout

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.