# Center

Center a constrained piece of content in both axes of an available region.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Center, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Center minHeight="12rem" maxWidth="24rem">
        <Text as="p">A focused message.</Text>
      </Center>
    </FloodRoot>
  );
}
```

## Design notes

- Center supplies two-axis alignment with an inner content wrapper. minHeight sets the available vertical region; maxWidth constrains the content rather than the entire parent. Values are ordinary CSS lengths, preferably rem.
- inline opts into inline-grid for centering within text or an inline composition. It adds no content semantics, surface, spacing between siblings or viewport positioning. Use Stack/Inline for collections and Container for page gutters.
- Original compatible addition in the unpublished 0.2.5 source candidate.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `inline` | `boolean` | `false` |
| `maxWidth` | `string` | `—` |
| `minHeight` | `string` | `—` |
| `Native HTML props` | `HTMLAttributes<HTMLDivElement>` | `Forwarded` |