Center

Used to center its child within itself.

Panda

import { Center } from 'styled-system/jsx';

Usage

The Center pattern is used to center the content of a container.

Icon

Center can be used to create frames around icons or numbers.

Center with Inline

Use the inline to change the display to inline-flex.

Square

Square centers its child given the size (width and height).

Circle

Circle centers its child given the size and creates a circle around it.

Props

Center accepts CSS properties and the following specific props:

Prop	Type	Description
`inline`	`boolean`	Changes the display to `inline-flex`.
`size`	`string`	Sets the width and height of the element.

On this page

Edit this page on Github

Cerberus Design System | Docs

import { DecorativeBox } from '@/app/components/decorative-box'
import { Center } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <Center h="100px" maxW="320px">
      <DecorativeBox p="sm">This is centered</DecorativeBox>
    </Center>
  )
}

import { PhoneBlock } from '@carbon/icons-react'
import { Circle } from 'styled-system/jsx'

export function CircleDemo() {
  return (
    <Circle size="10" bgColor="danger.bg.initial" color="danger.text.100">
      <PhoneBlock />
    </Circle>
  )
}

import { Center } from 'styled-system/jsx'
import { Text } from '@cerberus/react'
import { Phone } from '@carbon/icons-react'

export function InlineDemo() {
  return (
    <Center inline bg="page.bg.100" gap="sm" h="100px" maxW="320px" px="md">
      <Phone />
      <Text>This will be centered</Text>
    </Center>
  )
}

import { Center, HStack } from 'styled-system/jsx'
import { Text } from '@cerberus/react'
import { Phone } from '@carbon/icons-react'

export function IconDemo() {
  return (
    <HStack>
      <Center w="40px" h="40px" bg="tomato" color="white">
        <Phone />
      </Center>

      <Center w="40px" h="40px" bg="tomato" color="white">
        <Text as="span" fontWeight="bold" fontSize="lg">
          1
        </Text>
      </Center>
    </HStack>
  )
}

import { PhoneIncoming } from '@carbon/icons-react'
import { Square } from 'styled-system/jsx'

export function SquareDemo() {
  return (
    <Square size="10" bg="purple.700" color="white">
      <PhoneIncoming />
    </Square>
  )
}