Center

Centres its content horizontally and vertically.

import { ... } from '@corndev/ui'

No results yet

HTML

No JavaScript required — these classes are the whole component.

<div class="corn-center" data-fill>Centred</div>

Classes

Class
`.corn-center`

Attributes

Attribute	Values
`data-inline`	`present or absent`
`data-fill`	`present or absent`

Vanilla JS

Optional. createCenter only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createCenter } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createCenter(el, { /* options */ });

Options

Option	Type	Default	Description
`inline`	`boolean`	`false`	Centre inside a line of text or a table cell rather than as a block.
`fill`	`boolean`	`false`	Fill the parent, which is what “centre this on the page” usually means.

React

Center — from @corndev/ui-react.

Props

Prop	Type	Default	Description
`inline`	`boolean`	`false`	Centre inside a line of text or a table cell rather than as a block.
`fill`	`boolean`	`false`	Fill the parent — usually what “centre this on the page” means.
`as`	`string\|React.ComponentType`	`'div'`	Element or component to render as.
`className`	`string`	`undefined`	Merged with the Corn UI classes.
`children`	`React.ReactNode`	`undefined`

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

<Center fill>
  <Spinner />
</Center>

fill makes it fill its parent, which is what “centre this on the page” almost always means — without it the box is only as tall as its content, and centring vertically inside it does nothing visible. That is the one thing people get wrong here.

inline centres inside a line of text or a table cell instead.

Vanilla

<div class="corn-center" data-fill>…</div>

import { createCenter } from '@corndev/ui';

createCenter(document.querySelector('#empty-state'), { fill: true });