Center

Center is a layout component that centers its child within itself.

Import

import { CCenter, CCircle, CSquare } from '@chakra-ui/vue-next';
  • CCenter: centers its child given width and height
  • CSquare: centers its child given size (width and height)
  • CCircle: a Square with round border-radius

Usage

Put any child element inside it, give it any width or/and height, it'll ensure the child is centered.

This is the Center 
<CCenter bg='tomato' h='100px' color='white'>    This is the Center
</CCenter>

With Icons

CCenter can be used to create frames around icons or numbers.

1 
<CHStack>    <CCenter w='40px' h='40px' bg='tomato' color='white'>        <CIcon name="phone" />    </CCenter>    <CCenter w='40px' h='40px' bg='tomato' color='white'>        <CBox as='span' fontWeight='bold' fontSize='lg'>        1
        </CBox>    </CCenter></CHStack>

Square and Circle

The Square and Circle components automatically centers its children given the size.

<CHStack>    <CCircle size='40px' bg='teal.800' color='white'>        <CIcon name="phone" />    </CCircle>    <CSquare size='40px' bg='rebeccapurple' color='white'>        <CIcon name="phone" />    </CSquare></CHStack>

Edit this page on GitHub