Component to center its children horizontally.

The <Center> is a layout component that centers its children horizontally. You can use it to center a single child or a list of children. The <Center> component has also the property maxWidth.

The <Center> component can also be a child from the <Stack> or <Inline> component.



To import the component you just have to use this code below.

import { Center } from '@marigold/components';


spaceResponsiveStyleValue<string>noneThe space between the children
maxWidthstring-The maximum width of the container.


Center element with maximum width

To center an element you must give the element a maxWidth prop.

Center more than one element with space

To add spaces between each child you can use the prop space.

Center inside Text Block

If you want to center something like a <Button> you must only wrap your component with a <Center> component.

Star Wars - The Empire Strikes Back

It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.

Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth. The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....