Get Started
Components
Styling
Theming

Center

Used to center its child within itself.

import { Box, Center } from "styled-system/jsx";


const Demo = () => {
  return (
    <Center bg="page.surface.100" h="100px" maxW="320px">
      <Box>This will be centered</Box>
    </Center>
  )
}

Usage

import { Center } from "styled-system/jsx";
<Center bg="tomato" h="100px" color="white">
  This is the Center
</Center>

Examples

Icon

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

import { Center, HStack } from "styled-system/jsx"
import { Text } from "@cerberus/react"
import { LuPhone } from "react-icons/lu"


const Demo = () => {
  return (
    <HStack>
      <Center w="40px" h="40px" bg="tomato" color="white">
        <LuPhone />
      </Center>


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

Center with Inline

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

import { Center } from "styled-system/jsx"
import { Text } from "@cerberus/react"


const Demo = () => {
  return (
    <Center inline bg="page.surface.100" h="100px" maxW="320px">
      <Text>This will be centered</Text>
    </Center>
  )
}

Square

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

import { Square } from "styled-system/jsx"
import { LuPhoneForwarded } from "react-icons/lu"


const Demo = () => {
  return (
    <Square size="10" bg="purple.700" color="white">
      <LuPhoneForwarded />
    </Square>
  )
}

Circle

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

import { Circle } from "styled-system/jsx"
import { LuPhoneForwarded } from "react-icons/lu"


const Demo = () => {
  return (
    <Circle size="10" bg="purple.700" color="white">
      <LuPhoneForwarded />
    </Circle>
  )
}

Props

Center accepts CSS properties and the following specific props:

PropTypeDescription
inlinebooleanChanges the display to inline-flex.
sizestringSets the width and height of the element.

On this page