Components

Center

A layout container that vertically and horizontally centers its children

Overview

Center is a flexbox-based centering container. display: flex, align-items: center, and justify-content: center are applied by default.

  • Polymorphic — Render as any HTML element via the as prop
  • Sprinkles support — All design token props available (p, m, bg, rounded, etc.)
  • Concise — Eliminates centering boilerplate

Basic Usage

Centered text

Polymorphic Rendering

All tasks are done

Props

PropTypeDefaultRequiredDescription
asElementType'div'NoElement to render
childrenReactNode-NoContent

display, alignItems, and justifyContent are fixed internally and cannot be overridden.

Guidelines

  • Use Center instead of Box when simple centering is needed
  • For single-axis alignment only, use Stack or Inline instead