Center

Centres its children on one axis or both.

import { Center } from '@textui/core';

<Center flex={1}>
  <text content="nothing selected" fg="muted" />
</Center>

Props

| Prop | Type | Default | | | — | — | — | — | | axis | 'both' \| 'horizontal' \| 'vertical' | | Centre horizontally, vertically, or both. |

Plus everything on BoxProps.

axis takes 'both' (the default), 'horizontal' or 'vertical'.

Centring needs room to centre in, so this is nearly always paired with flex={1} or a fixed size. A Center that is exactly as big as its child does nothing at all.

See also

• EmptyState - the centred “nothing here” message, already written
• Row, Column - align and justify for finer placement