Center

Overview

The Center component centers its content on both axes.

Reach for it for a loader, an icon or an empty state in the middle of a box, a card or a section. It centers across its whole width, and down its height when it has one: give it one with a helper such as aspectRatio, or put it in something that sets one. Several children sit side by side in the middle, with no gap unless you set one, and their own block margins are zeroed.

info

Bulma has no center component, so Center brings its own styles, in bestax.css and its variants, or in extras.css next to your own Bulma. It's centered in bestax-no-helpers.css too, where props like gap and display have no helper class to add.

---

Import

import { Center } from '@allxsmith/bestax-bulma';

---

Usage

Basic Usage

A loader in the middle of a panel with a height of its own, from aspectRatio.

<Center aspectRatio="16by9" bgColor="light">
  <Loader textSize="3" ariaLabel="Loading the report" />
</Center>

In a Card

With padding and no height, it centers across the card.

<Card>
  <Card.Content>
    <Center p="6">
      <Loader textSize="3" ariaLabel="Loading invoices" />
    </Center>
  </Card.Content>
</Card>

Several Children

Several children sit side by side in the middle. Set a gap to space them.

<Center gap="2" p="5" bgColor="light">
  <Span>Nothing here yet.</Span>
  <Button color="primary">Add one</Button>
</Center>

For a column of children in the middle, use a Stack with alignItems="center", or an EmptyState for an empty list.

Inline

display="inline-flex" sizes it to its content, to center something in a line of text. It renders a block element, so put the line in a Block or a div rather than a Paragraph, which can't hold one.

<Block>
  Sync is{' '}
  <Center
    display="inline-flex"
    bgColor="success"
    textColor="white"
    radius="rounded"
    p="1"
  >
    <Icon name="check" ariaLabel="on" />
  </Center>{' '}
  for every device.
</Block>

---

Accessibility

• No role of its own: a Center adds nothing to the accessibility tree, apart from role="list" on a ul or ol, which Safari otherwise drops once Bulma's reset hides the markers.
• Order: several children stay in their own order, so what's seen, the reading order and the Tab order agree.
• What it centers names itself: a loader or an icon in a Center needs its own accessible name, as Loader's ariaLabel and Icon's ariaLabel give it.

---

Related Components

• Stack: A column of children, which alignItems="center" centers across.
• Flex: A flex container with CSS's own defaults and every flex property as a prop.
• EmptyState: A centered message for an empty list or page.
• Loader: The spinner a Center usually holds.
• Helper Props: Bulma helper props for spacing, color, etc.

---

Additional Resources

• Storybook: Center Stories
• The Flex guide: The flex helper props, and gap.

---

Props

Prop	Type	Default	Description
as	LayoutElement	'div'	The element to render. With ul or ol, give it li children: it restates role="list", which Bulma's list reset takes away in Safari.
gap	BulmaGapStep	—	Space between children, when there are several. None by default. Needs Bulma's helper classes: under bestax-no-helpers.css the default stays.
display	(typeof validDisplays)[number] | 'none'	—	'inline-flex' sizes it to its content, to center something inside a line of text. Needs Bulma's helper classes: under bestax-no-helpers.css the default stays.
className	string	—	Additional CSS classes.
children	React.ReactNode	—	What it lays out. The top and bottom margins Bulma gives them are zeroed, so gap is the only space between them, and a spacing helper such as mt="2" still adds to it. A Columns child keeps its own top and side margins, and takes at the bottom the one Bulma gives the last Columns in a container, the column gap pulled back in (none when gapless), so its columns line up. A Pagination child keeps its negative margins too, so its links line up.
textColor	Bulma color | 'inherit' | 'current'	—	Text color helper.
bgColor	Bulma color | 'inherit' | 'current'	—	Background color helper.
ref	PolymorphicRef<LayoutElement>	—	Ref forwarded to the element as renders.
...	Remaining props of the element selected by as and Bulma helper props	—	See Helper Props

Types:

• BulmaGapStep: '0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '4.5' | '5' | '5.5' | '6' | '6.5' | '7' | '7.5' | '8' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8 — A gap step as gap, columnGap and rowGap take it: a value from validGaps, or the same step written as a number (gap={2}, gap={1.5}). Grid took its gaps as numbers before the gap helpers were shared, so every gap prop still does.
• LayoutElement: 'div' | 'main' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'form' | 'fieldset' — The elements Stack, Group, Center and Flex can render as: Container's landmarks and sections, a list, a form or a fieldset.