# Center

```tsx
import { Box, Center } from "@chakra-ui/react"

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

```

## Usage

```jsx
import { Center, Circle, Square } from "@chakra-ui/react"
```

```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.

```tsx
import { Box, Center, HStack } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"

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

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

```

### Center with Inline

Use the `inline` prop to make `Center` behave like an inline element
(`display: inline-flex`) instead of a block-level element (`display: flex`).
This makes `Center` only take up as much width as its content needs, allowing it
to fit inside links, buttons, or other inline contexts without breaking the
layout.

```tsx
import { Box, Center, Link } from "@chakra-ui/react"
import { LuArrowRight } from "react-icons/lu"

export const CenterWithInline = () => {
  return (
    <Link href="#">
      <Center inline gap="4">
        <Box>Visit Chakra UI</Box>
        <LuArrowRight />
      </Center>
    </Link>
  )
}

```

### Square

`Square` centers its child within a fixed-size container of equal width and
height. It accepts a `size` prop that sets both width and height to the same
value.

```tsx
import { Square } from "@chakra-ui/react"
import { LuPhoneForwarded } from "react-icons/lu"

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

```

### Circle

`Circle` extends `Square` by adding `borderRadius="9999px"` to create a perfect
circle. Like `Square`, it accepts a `size` prop that sets both width and height
to the same value.

```tsx
import { Circle } from "@chakra-ui/react"
import { LuPhoneForwarded } from "react-icons/lu"

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

```

## Props

### Center

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |


### Square

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |


### Circle

`Circle` extends `Square` and accepts all the same props. The only difference is
that `Circle` applies `borderRadius="9999px"`.

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |