Center

Centres its content on both axes.

Your shelf is empty

Anything you save will show up here.

<script setup lang="ts">
  import { BookOpen } from '@lucide/vue'
  import { Button, Card, Center, Heading, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Card class="w-full max-w-md">
    <Center class="h-56">
      <Stack gap="sm" align="center">
        <Center class="bg-inset text-muted size-12 rounded-full">
          <BookOpen class="size-6" />
        </Center>
        <Heading :level="3" size="md">Your shelf is empty</Heading>
        <Text tone="muted" size="sm">Anything you save will show up here.</Text>
        <Button size="sm" variant="soft" tone="neutral">Browse works</Button>
      </Stack>
    </Center>
  </Card>
</template>

vue

Usage

import { Center } from '@hina-ui/vue'

Center is a flex container centred on both axes. It sets no height of its own, so vertical centring depends on the height of the container — usually given by an h-* or min-h-* class.

Centred

<script setup lang="ts">
  import { Card, Center } from '@hina-ui/vue'
</script>

<template>
  <Center class="bg-inset h-32 w-full max-w-sm rounded-md">
    <Card class="grid size-16 place-items-center" :padded="false">Centred</Card>
  </Center>
</template>

vue

Examples

Inline

inline switches to inline-flex, keeping the container in the line of text — useful for aligning an icon with the words around it.

This sentence has an

external link

in the middle of it, with the icon aligned to the text.

<script setup lang="ts">
  import { ExternalLink } from '@lucide/vue'
  import { Center, Link, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-md">
    This sentence has an
    <Center inline class="gap-1">
      <Link href="#">external link</Link>
      <ExternalLink class="size-3.5" />
    </Center>
    in the middle of it, with the icon aligned to the text.
  </Text>
</template>

vue

API

Prop	Type	Default	Description
`inline`	`boolean`	`false`	Whether it is an inline container
`as`	`string`	`'div'`	The rendered tag
`class`	`string`	—	Classes appended to the container

Slot	Description
`default`	The children