AbsoluteCenter

Positions its children centered and absolutely filling the nearest positioned ancestor. Useful for a loading state or empty state centered on top of other content, e.g. a status message over a card while it loads, or a modal's content centered on its scrim. For positioning content at a corner or edge instead of dead-center, see AbsoluteView.

Loading…

<Box bg="surface" borderColor="border" borderWidth={1} w={160} h={100} rounded="r-3" style={{ position: 'relative' }}>
  <AbsoluteCenter>
    <Text variant="bodySmall" color="textMuted">
      Loading…
    </Text>
  </AbsoluteCenter>
</Box>

Props

AbsoluteCenter accepts every Box prop except style (its position: 'absolute' inset styling is fixed internally). align and justify default to 'center' but can be overridden. See Box's props for the full list, including gap, spacing (m*/p*), bg, and rounded.

Props​

Props