Centers content vertically and horizontally
To use Center with inline elements, set the inline prop. For example, you can center a link icon and label:
Center is a polymorphic component – its default root element is div , but it can be changed to any other element or component with the component prop:
Polymorphic components with TypeScript
Note that polymorphic component prop types are different from regular components – they do not extend HTML element props of the default element. For example, Center Props does not extend React.ComponentProps '<' div '>' although div is the default element.
If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support the component prop), then your component props interface should extend HTML element props, for example:
If you want your component to remain polymorphic after wrapping, use the polymorphic function described in this guide .