Centers content vertically and horizontally


Center is a wrapper for commonly used center pattern:

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
Centered content
All elements inside Center are centered
<Center style={{ width: 400, height: 200 }}>
<div>All elements inside Center are centered</div>


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

<Anchor href="" target="_blank">
<Center inline>
<ArrowLeftIcon style={{ marginRight: 5 }} />
<span>Back to Mantine website</span>
Build fully functional accessible web applications faster than ever
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