Center

The Center layout horizontally centers layout elements with a configurable maximum width. This component is designed to create centered containers that won't exceed a specified threshold width, making it ideal for content areas that need to remain readable and well-proportioned across different screen sizes.

Example

<div class="center" style="--layout-threshold: 60ch">
  <h1>Centered Content</h1>
  <p>
    This content will be centered horizontally and won't exceed the threshold
    width.
  </p>
</div>

Custom Properties