Center (l--center)

l--center is a class for centering elements both horizontally and vertically.

CSS

.l--center {
  display: grid;
  place-content: center;
  place-items: center;
}

Lism Component

Import

import { Center } from 'lism-css/react';

Usage

Horizontal centering

When Center has no height, it simply aligns its content horizontally centered.

↓

When no height is set

TEXT

Resize

<Center bd p="30">
  <Text fz="l">TEXT</Text>
</Center>

↓

Long text wraps and stays left-aligned, preserving readability.

TEXT

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Resize

<Center bd p="30" g="15">
  <Text fz="l">TEXT</Text>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</Center>

<div class="l--center -bd -p:30 -g:15">
  <p class="-fz:l">TEXT</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>

Centering both horizontally and vertically

When Center has a height or aspect ratio set, content is also centered vertically.

↓

Centered both horizontally and vertically

TEXT

Lorem ipsum dolor sit amet.

<Center g="10" ar="3/2" bd>
  <Text fz="l">TEXT</Text>
  <Text fz="s">Lorem ipsum dolor sit amet.</Text>
</Center>