v2.5.1
Discord
Source code

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 MantineChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGithub 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
Join Discord community
Follow Mantine on Twitter