Layout layoututilityabsolute

Absolute Center Box

Overlay or layout utility to fix content exactly in the screen center.

Component preview not available for: center-fixed-box

Ensure the filename matches CenterFixedBox.astro

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { AbsoluteCenterBox } from 'astro-component-kit';
---

<CenterFixedBox>Content</CenterFixedBox>
--- import { AbsoluteCenterBox } from 'astro-component-kit'; --- <CenterFixedBox>Content</CenterFixedBox>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/AbsoluteCenterBox.astro and paste the following code:

astro 
---
---
<div class="abs-center"><slot /></div>
<style>
  .abs-center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 500; }
</style>
--- --- <div class="abs-center"><slot /></div> <style> .abs-center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 500; } </style>

Quick Info

Category
Layout
Filename
AbsoluteCenterBox.astro
Dependencies
None — pure Astro + CSS
Tags
layoututilityabsolute