Center

Centers content vertically and horizontally
Import

Usage

Center is a wrapper for 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:

<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 faster than ever
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