React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Components: Layouts
CTA Center
Basic Usage General Guidelines API FormLayout Grid List Media Toolbar
CSS Helpers
Readme

# Center

The Center layout aligns content both horizontally and vertically.

##
Basic Usage

To implement the Center component, you need to import it first:

    import { Center } from '@react-ui-org/react-ui';

And use it:

Look, I'm centered!
<Placeholder height="200px" bordered> <Center> <Placeholder bordered>Look, I&apos;m centered!</Placeholder> </Center> </Placeholder>

    <Placeholder height="200px" bordered>  <Center>    <Placeholder bordered>Look, I&apos;m centered!</Placeholder>  </Center></Placeholder>

See
API for all available options.

## General Guidelines

- The Center takes up all
  available horizontal space and expands vertically according to the length of its content. Depending on your layout, you may need to define the height of its parent to see the vertical alignment work.

- The Center layout uses
  `flexbox` for alignment. You may need to define the desired width of your centered content because it will be shrunk to the smallest possible width by default.

## API

children
node
null

Next: FormLayout →