Center

Centers content vertically and horizontally
Import

Usage

All elements inside Center are centered
import { Center } from '@mantine/core';
function Demo() {
return (
<Center style={{ width: 400, height: 200 }}>
<div>All elements inside Center are centered</div>
</Center>
);
}

Inline

To use center with inline elements set inline prop. For example, you can center link icon and label:

import { Center, Anchor, Box } from '@mantine/core';
import { IconArrowLeft } from '@tabler/icons';
function Demo() {
return (
<Anchor href="https://mantine.dev" target="_blank">
<Center inline>
<IconArrowLeft size={14} />
<Box ml={5}>Back to Mantine website</Box>
</Center>
</Anchor>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Center component props

NameTypeDescription
children *
ReactNode
Content that should be centered vertically and horizontally
inline
boolean
Set to true to use inline-flex instead of flex