Center

Used to center its child within itself.

Import

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

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

Loading example...

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

Loading example...

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

Loading example...

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

Loading example...

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

Loading example...

The Center component accepts the following utility props in addition to style and factory 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

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

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

This is centered

Loading example...

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

Loading example...

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

This will be centered

Loading example...

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

Loading example...

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

Loading example...

The Center component accepts the following utility props in addition to style and factory props:

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