Center

Layout

Centres a single child element both horizontally and vertically.

Applies display: flex; align-items: center; justify-content: center. Use inline for an inline-flex version that doesn't expand to fill its container.

Usage

import { Center, Loader } from "nosible-ux"

export default function Example() {
  return (
    <Center style={{ height: 200 }}>
      <Loader />
    </Center>
  )
}

Examples

Inline centering

Global scan active

Props

Name	Type	Default	Description
`asChild`	`boolean \| undefined`	—	When true, merges Center styles onto the child element instead of a wrapper div.
`inline`	`boolean \| undefined`	—	When true, renders as inline-flex instead of flex. Useful for inline centering (e.g. icon + text pairing). Default: false.

← All Components Getting Started →