Center

The built-in center tag — centers its content both horizontally and vertically. Block and inline modes, sizing, and a full attribute reference.

{% center %} is a built-in tag that centers its content both horizontally and vertically. Give the container a height — with the h prop or from what’s around it — and the body lands in the middle. It ships with aardvark, so there’s no setup.

Use it as {% center %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'center', …).

Block centering

By default Center is a block-level flex container. Set a height so there’s room to center within, and the body sits dead center.

Inline centering

inline switches the container to inline-flex — use it to vertically center an icon or badge alongside a run of text rather than as a block.

With other components

The body is ordinary Markdown, so you can center a richer cluster — here a horizontal {% group %} of buttons inside a tall, tinted box.

Attributes

inline is the one option of its own; everything else is the shared Mantine spacing/sizing system. h is the one you’ll reach for most, since centering vertically needs a height.

CSS Selectors

Each center carries data-aardvark-island="Center" on its wrapper, and Mantine exposes its parts as mantine-Center-* classes — target either to style it from your theme CSS.

[data-aardvark-island="Center"] {
  /* style every center on the page */
}

.mantine-Center-root {
  /* the root part */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.