Centre

A layout component that centers its children both horizontally and vertically using flexbox. Also exports Square and AbsoluteCentre variants for specific centering needs.

Anatomy

<script>
  import { Centre, Square, AbsoluteCentre } from "@saas-ui/svelte/layout/centre";
</script>

<!-- Center content with flexbox -->
<Centre class="h-32">
  Centered content
</Centre>

<!-- Fixed-size square container -->
<Square size={10}>
  Icon
</Square>

<!-- Absolute positioning center -->
<div class="relative h-32">
  <AbsoluteCentre>
    Absolutely centered
  </AbsoluteCentre>
</div>

Examples

Absolute Centre Accessibility

AbsoluteCentre uses absolute positioning to center content within a relatively positioned parent.

<div class="bg-bg-emphasized relative h-24">
	<AbsoluteCentre class="bg-accent-solid p-4 text-white">
		<Icon as={PhoneIcon} />
	</AbsoluteCentre>
</div>

Basic Accessibility

Basic Centre component that horizontally and vertically centers its children using flexbox.

<Centre class="bg-bg-emphasized h-25 w-80">
	<Text>This will be centred</Text>
</Centre>

Circle Accessibility

Combine Square with rounded-full class to create circular containers for badges and icons.

<Circle size="md" colour="blue">
	<Icon as={PhoneIcon} />
</Circle>

Square Accessibility

Square component creates a fixed-size square container with centered content, useful for icons and avatars.

<Square size={10} class="bg-purple-700 text-white">
	<Icon as={PhoneIcon} />
</Square>

Props

Prop	Type	Default	Description
`inline`	`boolean`	`false`	Whether to use inline-flex instead of flex.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.