Center
A layout primitive that places its content dead-center within itself. Use the axis attribute to constrain centering to a single direction, and min-h to give it a minimum height for hero sections or full-viewport blocks. Theming flows through standard var(--pura-*) tokens.
Preview
<script type="module" src="/pura/lib/center.js"></script>
<!-- Full-viewport splash screen -->
<pura-center min-h="100vh">
<div style="text-align: center;">
<h1>Loading your workspace</h1>
<p>Hang tight, this only takes a moment.</p>
</div>
</pura-center>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
axis | "both" | "x" | "y" | both | Which axis to center on. "both" centers in both directions, "x" centers horizontally while keeping content top-aligned, and "y" centers vertically while keeping content left-aligned. |
min-h | CSS length | auto | Minimum height of the centering area as any CSS length (e.g. 100vh, 320px). Useful for heroes and full-viewport sections. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/center.js"></script>import "./pura/lib/center.js";