Center

Use Center

Center is a named export of @flood-md/react. Connect the package once, then import what you use.

"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