Skip to content

Latest commit

 

History

History
30 lines (24 loc) · 660 Bytes

page.mdx

File metadata and controls

30 lines (24 loc) · 660 Bytes

export const metadata = { title: 'Center', alternates: { canonical: '/docs/api/center' } }

Center

The Center component is a layout component that centers its children both vertically and horizontally.

It has a display: flex style with justify-content: center and align-items: center.

How to use

// Before
<Center>
    <Box bg="blue" w={25} h={25} />
    <Box bg="blue" w={25} h={25} />
    <Box bg="blue" w={25} h={25} />
</Center>

// After, It has 3 classes on default
<div className="d3 d4 d5">
    <div className="d0 d1 d2"></div>
    <div className="d0 d1 d2"></div>
    <div className="d0 d1 d2"></div>
</div>```