Center

Usage

import { Center, Box } from '@mantine/core';

function Demo() {
  return (
    <Center maw={400} h={100} bg="var(--mantine-color-gray-light)">
      <Box bg="var(--mantine-color-blue-light)">All elements inside Center are centered</Box>
    </Center>
  );
}

Inline

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

import { Center, Anchor, Box, rem } from '@mantine/core';
import { IconArrowLeft } from '@tabler/icons-react';

function Demo() {
  return (
    <Anchor href="https://mantine.dev" target="_blank">
      <Center inline>
        <IconArrowLeft style={{ width: rem(12), height: rem(12) }} />
        <Box ml={5}>Back to Mantine website</Box>
      </Center>
    </Anchor>
  );
}

Polymorphic component

Center is a polymorphic component – its default root element is div, but it can be changed to any other element or component with component prop:

import { Center } from '@mantine/core';

function Demo() {
  return <Center component="button" />;
}

Polymorphic components with TypeScript

Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, CenterProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example:

import type { CenterProps, ElementProps } from '@mantine/core';

interface MyCenterProps extends CenterProps,
  ElementProps<'button', keyof CenterProps> {}

If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.