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

1const before = (
2  <Center>
3    <Box bg="blue" w={25} h={25} />
4    <Box bg="blue" w={25} h={25} />
5    <Box bg="blue" w={25} h={25} />
6  </Center>
7)
8
9const after = (
10  <div className="d3 d4 d5">
11    <div className="d0 d1 d2"></div>
12    <div className="d0 d1 d2"></div>
13    <div className="d0 d1 d2"></div>
14  </div>
15)
1const before = (
2  <Center>
3    <Box bg="blue" w={25} h={25} />
4    <Box bg="blue" w={25} h={25} />
5    <Box bg="blue" w={25} h={25} />
6  </Center>
7)
8
9const after = (
10  <div className="d3 d4 d5">
11    <div className="d0 d1 d2"></div>
12    <div className="d0 d1 d2"></div>
13    <div className="d0 d1 d2"></div>
14  </div>
15)