# `PhiaUi.Components.Layout.Center`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/center.ex#L1)

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>

# `center`

Renders a centering container.
## Attributes

* `variant` (`:atom`) - Centering strategy: `default` (flex), `inline` (inline-flex), `absolute` (inset overlay). Defaults to `:default`. Must be one of `:default`, `:inline`, or `:absolute`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Content to be centered.

---

*Consult [api-reference.md](api-reference.md) for complete listing*