Marigold
Marigold

Application

MarigoldProvider
RouterProvider

Layout

AppLayoutbeta
Aside
Aspect
Breakout
Center
Columns
Container
Grid
Inline
Inset
Scrollable
Split
Stack
Tiles

Actions

ActionBaralpha
Button
Link
LinkButton
ToggleButtonalpha
ToggleButtonGroupalpha

Form

Autocomplete
Calendar
Checkbox
ComboBox
DateField
DatePicker
FileField
Form
Multiselectdeprecated
NumberField
Radio
SearchField
Select
Slider
Switch
TagFieldbeta
TextArea
TextField
TimeField

Collection

SelectList
Table
Tag

Navigation

Accordion
Breadcrumbsupdated
Pagination
Sidebarbeta
Tabsupdated
TopNavigationbeta

Overlay

ContextualHelp
Dialog
Drawer
Menu
Toastbeta
Tooltip

Content

Badge
Card
Divider
EmptyStatebeta
Headline
Icon
List
Loader
SectionMessage
SVG
Text

Formatters

DateFormat
NumericFormat

Hooks and Utils

cn
cva
extendTheme
parseFormData
useAsyncListData
useListData
useResponsiveValue
useTheme
VisuallyHidden
Components

Center

Component to center its children horizontally.

The <Center> is a layout component that centers its children horizontally within a container.

Usage

You can use it to center a single child or a list of children. The maxWidth prop sets the maximum width of the container and the space prop adds spacing between the children elements.

The <Center> component can also be used with components like <Text>, <Stack> or <Inline> component.

import { Center } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => (  <Center maxWidth="xxlarge" space={1}>    <Rectangle height="50px" width="300px" />    <Rectangle height="50px" width="300px" />    <Rectangle height="50px" width="300px" />  </Center>);

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
View Center stories

Center

Prop

Type

Related

Building layouts

Learn how to build layouts.
Last update: a month ago

Breakout

When you need to break out of a grid layout.

Columns

Position content in one row.

On this page

UsagePropsCenterRelated