Components / Center
Center
Centers content on both axes, with an optional max-width for constraining readable content blocks. Use `full` to fill the parent height.
layoutv0.8.0
Playground
Examples
Centered spinner
<cg-center full style="min-height:160px;border:1px dashed var(--cg-color-surface-cards-border);border-radius:8px;"><cg-spinner></cg-spinner></cg-center>Constrained content column
<cg-center max-width="420px" inline gap="sm"><cg-text as="h3">Readable width</cg-text><cg-text color="secondary">This content column is capped so lines stay comfortable to read.</cg-text></cg-center>Empty-state style
<cg-center full gap="sm" style="min-height:200px;"><cg-text as="h4">Nothing here yet</cg-text><cg-button variant="primary">Create one</cg-button></cg-center>Import
import { CgCenter } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-center';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
inline | boolean | false | Center inline-axis only, keep block flow |
max-width | string | "" | Max-width for the centered content wrapper |
full | boolean | false | min-height: 100% to enable vertical centering |
gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | Gap between stacked children |