Basic Usage

Centers any content within its parent container.

Centered content

Empty State

Center icon and text for empty state messages.

No messages yet

Loading State

Center a spinner for loading indicators within bounded containers.

Success Message

Center a success confirmation with icon, heading, and action.

Payment Successful

Your order has been confirmed.

In Card

Center content inside a Card component for placeholder or empty states.

No image uploaded

Search No Results

Center a no-results state for search interfaces.

No results found

Usage

<div style="height: 120px"> <Center> <span>Centered content</span> </Center></div><Center> <Icon name="inbox" size="32" /> <p>No messages yet</p></Center><Center> <Spinner size="32" /></Center>

Props

PropTypeDescription
childrencontentContent to center horizontally and vertically