Skip to content

center.md

Latest commit

 

History

History
37 lines (26 loc) · 958 Bytes

center.md

File metadata and controls

37 lines (26 loc) · 958 Bytes
Raw
title Center
parent Layout and overflow
grand_parent Components

Center

{: .no_toc }

Centres its children on one axis or both.

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

<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