A centred block places its content in the middle of the space it is given. It is what a sign-in card, an empty page, a permission prompt and an error state all use, and it exists so those three flex properties are written once rather than in every consumer. It is the counterpart of `Stack` for the case where there is one thing to place rather than a list to arrange. `Stack` distributes children, `Split` balances two panes, and `Centered` has one job: deciding where the single thing goes. ```tsx demo="layouts/centered-preview" ``` ## Usage ```tsx import { Centered } from "@asheeui/web"; ``` ## Which axis `axis` is `both`, `horizontal` or `vertical`. `horizontal` centres the block sideways only; `vertical` centres it down only; `both` does the two, and it also centres the text, because a block centred on both axes is almost always a short statement rather than a paragraph. A consumer that wants the position without the alignment appends its own class, which wins over the component's. ```tsx demo="layouts/centered-axes" ``` `both` is the default. An instance whose content is a paragraph it wants left-aligned states `axis="horizontal"`: centring down does nothing for a block that is only as tall as its text, and `both` would centre the text as well. ## The height it centres in Vertical centring only means something if the block is taller than its content. `minHeight` is what gives it that room, taken from the shared spacing scale, and without it the block is exactly as tall as its content, so `justify-center` has nothing to centre in. Vertical centring without a height does nothing at all. That is also why the component reserves none by default: a block that claimed height on its own would add space to every page that used it. ```tsx demo="layouts/centered-height" ``` `contained` holds the content in a `Container` at `containerSize`, which is what a whole-page centred region needs so that a card or a heading keeps a readable measure instead of stretching to the window. Without it the block is as wide as its parent and only its children are centred. ## Props ```props Centered ``` `axis`, `contained` and `containerSize` are registered by the component as `both`, `false` and `lg`, so each resolves from the instance, then `components.centered`, then that value. `minHeight` is not registered: its fallback is `none`, so a block reserves height only when the instance or the application asks for it, and no layout gains empty space as a side effect of using the component. ## Accessibility - The block adds no role and no ARIA attributes: it is a `div`, or whatever `as` names, and it changes where its content sits rather than what the content is. The reading order stays the source order. - `axis="both"` sets the text alignment as well as the two flex properties, so it changes how text reads and not only where the block starts. State `horizontal` when the centring is about position alone. - The room is reserved with a minimum height rather than claimed by an empty element, so a loading or empty region does not collapse and then jump when its content arrives, the reserved space is the point of the option, not a side effect. - A centred block usually holds the page's single action. Keep that action a real `Button` or a link so it stays in the tab order and announces its role, rather than making the block itself pressable. `minHeight` takes the same spacing tokens as every other layout, see [Layout and spacing](/concepts/layout-and-spacing). ## Native `@asheeui/native` exports the same `Centered` with the same `axis` and `minHeight`, resolved through the native registry, and the platform's spacing scale mirrors the web's, so a step means the same thing on both. `contained` and `containerSize` are web-only: the platform's `Centered` takes the axis and the height and nothing else, and a screen that wants a maximum measure wraps the block in the platform's `Container`. See [React Native](/platforms/native). ## Related ```related container, card, split ```