center-an-element

centerAnElement(display, gap);

Returns a style object to quickly center a given element/component.

Npm package

Github repo

Installation

npm install center-an-element

Usage

import centerAnElement from "center-an-element";

- Inputs -

display - What display property you want to use

• flex - returns an style object centered with css flexbox

• grid - returns a style object centered with css grid

gap - Number (Optional) add a gap to the centered element

- Outputs -

Given a display key will return a style object corresponding to that display:

console.log(centerAnElement('flex');

  ---> //
  {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  }

If a gap argument is passed in, it will be applied to the returned object.

console.log(centerAnElement('grid', 4);

  ---> //
  {
    display: 'grid',
    placeContent: 'center',
    gap: '4px'
  }

Thanks for reading, I hope this is useful!