Center centered component

Center is an encapsulation of flex layout and its child components are always centered horizontally and vertically.

Effect demonstration

1. Default effect

<Center>
  <Box width={90} height={90} backgroundColor="func500" />
</Center>

2. Center in a container with specified width and height

<Box width={'100%'} height={400} borderWidth={1} borderColor={'border'}>
  <Center>
    <Box width={100} height={100} backgroundColor="func200" />
  </Center>
</Box>

API

Properties	Required	Description	Type	Default Value
width	false	width	string | number	100%
height	false	height	string | number	100%