Center

Centers content horizontally and vertically.

Basic

Centered content

Base

ClassDescription
.ui-centerBase class

Column

ClassDescription
.ui-center--columncolumn

Column Direction

First line Second line
<!-- Stack centered children vertically. -->
<div class="ui-center ui-center--column demo-box ui-bg-muted" style="--demo-h: var(--ui-row-6)">
  <span>First line</span>
  <span>Second line</span>
</div>

Full Page Center

No results found

<!-- Center content within a full viewport area, useful for loading or empty states. -->
<div class="ui-center demo-box ui-bg-muted" style="--demo-h: var(--ui-row-8)">
  <p>No results found</p>
</div>