Skip to main content

Center

Overview​

Center is a layout primitive that aligns its children both horizontally and vertically. Use it when you need a simple centering wrapper without extra flex configuration.

Live demoInteractive
Centered

Anatomy​

  • Root: The flex container.
  • Content: The centered children.

Usage​

import { Center } from '@grasdouble/lufa_design-system';

export function Example() {
  return (
    <Center>
      <span>Centered content</span>
    </Center>
  );
}

Props​

PropTypeDefaultDescription
inlinebooleanfalseIf true, renders as inline-flex.
asElementType'div'The HTML element to render.
childrenReactNode-The content to render.

Center also supports all Box props and standard HTML attributes.

Accessibility​

Center is non-interactive by default. Ensure any interactive content inside remains keyboard accessible and visible in focus order.

Theming & Tokens​

Center relies on Box props for spacing, color, and layout tokens. It does not introduce additional tokens of its own.

Do / Don’t​

Do

Use Center to align icons, loaders, or empty states without extra flex boilerplate.

Don’t

Avoid using Center for complex layouts—use Flex or Grid for multi-axis layout control.