var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),C=(r,e)=>{for(var t in e)c(r,t,{get:e[t],enumerable:!0})},l=(r,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of g(e))!m.call(r,i)&&i!==t&&c(r,i,{get:()=>e[i],enumerable:!(o=u(e,i))||o.enumerable});return r};var w=(r,e,t)=>(t=r!=null?s(p(r)):{},l(e||!r||!r.__esModule?c(t,"default",{value:r,enumerable:!0}):t,r)),b=r=>l(c({},"__esModule",{value:!0}),r);var h=x((k,d)=>{d.exports=_jsx_runtime});var q={};C(q,{default:()=>f,frontmatter:()=>S});var n=w(h()),S={id:"center",category:"layout",title:"Center",package:"@chakra-ui/layout",description:"Center is a layout component that centers its child within itself."};function a(r){let e=Object.assign({h2:"h2",pre:"pre",code:"code",ul:"ul",li:"li",strong:"strong",p:"p",h3:"h3"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Center, Square, Circle } from '@chakra-ui/react' `})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Center:"})," centers its child given ",(0,n.jsx)(e.code,{children:"width"})," and ",(0,n.jsx)(e.code,{children:"height"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Square:"})," centers its child given ",(0,n.jsx)(e.code,{children:"size"})," (width and height)"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Circle:"})," a ",(0,n.jsx)(e.code,{children:"Square"})," with round ",(0,n.jsx)(e.code,{children:"border-radius"})]}),` `]}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsxs)(e.p,{children:["Put any child element inside it, give it any ",(0,n.jsx)(e.code,{children:"width"})," or/and ",(0,n.jsx)(e.code,{children:"height"}),`, it'll ensure the child is centered.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` This is the Center `})}),` `,(0,n.jsx)(e.h3,{id:"with-icons",children:"With icons"}),` `,(0,n.jsx)(e.p,{children:"Center can be used to create frames around icons or numbers."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` 1 `})}),` `,(0,n.jsx)(e.h3,{id:"square-and-circle",children:"Square and Circle"}),` `,(0,n.jsxs)(e.p,{children:["To reduce boilerplate, we've exported ",(0,n.jsx)(e.code,{children:"Square"})," and ",(0,n.jsx)(e.code,{children:"Circle"}),` components that automatically centers its children given the `,(0,n.jsx)(e.code,{children:"size"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(a,r)})):a(r)}var f=j;return b(q);})(); ;return Component;

Center

Props#