Center

Centers content vertically and horizontally

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Center is a wrapper around commonly used center pattern:

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
  Centered content
</div>

All elements inside Center are centered

<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:

Back to Mantine website

<Anchor href="https://mantine.dev" target="_blank">
  <Center inline>
    <ArrowLeftIcon style={{ marginRight: 5 }} />
    <span>Back to Mantine website</span>
  </Center>
</Anchor>

Build fully functional accessible web applications with ease

Project

Contribute to Mantine Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter Github discussions

Feedback

Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good

Leave feedback

Built by Vitaly Rtishchev and these awesome people