var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},l=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of p(e))!m.call(t,i)&&i!==r&&c(t,i,{get:()=>e[i],enumerable:!(o=u(e,i))||o.enumerable});return t};var C=(t,e,r)=>(r=t!=null?s(g(t)):{},l(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),w=t=>l(c({},"__esModule",{value:!0}),t);var d=x((k,a)=>{a.exports=_jsx_runtime});var f={};b(f,{default:()=>S,frontmatter:()=>y});var n=C(d()),y={id:"center",category:"layout",title:"Center",package:"@chakra-ui/layout",description:"Center is a layout component that centers its child within itself."};function h(t){let e=Object.assign({h2:"h2",pre:"pre",code:"code",ul:"ul",li:"li",strong:"strong",p:"p",h3:"h3"},t.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.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"AbsoluteCenter:"})," centers relative to its parent by given ",(0,n.jsx)(e.code,{children:"axis"})]}),` `]}),` `,(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:` `})}),` `,(0,n.jsx)(e.h3,{id:"absolutecenter",children:"AbsoluteCenter"}),` `,(0,n.jsxs)(e.p,{children:[`Used to horizontally and vertically center an element relative to its parent dimensions. Uses the `,(0,n.jsx)(e.code,{children:"position: absolute"})," strategy. Takes ",(0,n.jsx)(e.code,{children:"axis"}),` prop which is could be "both" (by default), "horizontal" or "vertical".`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var S=j;return w(f);})(); ;return Component;

Center

Props#