Centers content both horizontally and vertically.

Three variants cover the most common centering patterns:

• :default — block flex container that fills its parent
• :inline — inline-flex for use inside text or tightly-sized wrappers
• :absolute — absolute inset-0 overlay (for centering over a positioned parent)

Examples

<%!-- Full-area centering --%>
<.center class="h-64">
  <.spinner />
</.center>

<%!-- Inline centering for icon badges --%>
<.center variant={:inline} class="h-8 w-8 rounded-full bg-primary">
  <.icon name="hero-check" class="text-primary-foreground" />
</.center>

<%!-- Absolute overlay loader --%>
<div class="relative h-40">
  <.center variant={:absolute}>
    <.spinner />
  </.center>
</div>