react mantine center component example

React Mantine Center Component Example

updated 21/01/23 By frontendshape

In this tutorial, we will see how to use Center component in react mantine core. We will create horizontal and vertical Centers component using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

How to Use Mantine in Next.JS 13


1. react mantine using Centers component content vertically and horizontally.

import { Center } from "@mantine/core";
export default function App() {
  return (
    <>
      <Center style={{ width: 800, height: 400 }}>
        <div>All elements inside Center are centered</div>
      </Center>
    </>
  );
}
mantine center component

mantine center component

2. react mantine Center component with button vertically and horizontally.

import { Button, Center } from "@mantine/core";
export default function App() {
  return (
    <>
      <Center style={{ width: 800, height: 400 }} bg="#ffb3ff">
        <Button color="cyan">Button</Button>
      </Center>
    </>
  );
}
mantine center component with button

mantine center component with button


3. react mantine ui Center component with icons. Before using icon you need to install @tabler/icons.

Run below command to install @tabler/icons.

npm i @tabler/icons 

Use @tabler/icons in react mantine ui Center component with inline props.

import { Center, Anchor, Box } from "@mantine/core";
import { IconArrowLeft } from "@tabler/icons";

export default function App() {
  return (
    <>
      <Anchor href="https://mantine.dev" target="_blank">
        <Center inline>
          <IconArrowLeft size={14} />
          <Box ml={5}>Back to Mantine website</Box>
        </Center>
      </Anchor>
    </>
  );
}
mantine ui center inline

mantine ui center inline