import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
import { Center } from "./";
import { theme } from "../../../css/globalStyle";

<Meta title="Components/Layout/Center" component={Center} />

# Center

Center is a layout component that centers its child within itself.

# Import

```
import { Center } from "@cloudline/cloudline-styled-components"
```

# Usage

Put any child element inside it, give it any width or/and height, it'll ensure the child is centered.

<Canvas withSource="open">
  <Story name="Center">
    <div style={{ backgroundColor: theme.color.primary[500], height: "200px" }}>
      <Center h="100%">I am centered</Center>
    </div>
  </Story>
</Canvas>

<ArgsTable story="Center" />
