pc

postcss-center

PostCSS plugin to center elements.

Showing:

Popularity

Downloads/wk

224

GitHub Stars

47

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

21.1KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

postcss-center

NPM version npm license Travis Build Status codecov Dependency Status

npm

PostCSS plugin to center elements.

Introduction

Centering elements in CSS isn't exactly straight-forward, but we can change that!

.foo {
    top: center;
    left: center;
}

Transpiles into:

.foo {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

Of course, you don't have to include both top and left:

.foo {
    top: center;
}

Transpiles into:

.foo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Or...

.foo {
    left: center;
}

Transpiles into:

.foo {
    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translateX(-50%);
}

That's about it!

Conditions

  • If the value of top or left is not center it will be preserved. If both are not center, this plugin will do nothing!
  • If the rule already has a position it will only be preserved if its value is relative or fixed. All other values will be replaced with absolute.
  • If the rule has a position of relative or the value of left is not center, the margin-right declaration will not be inserted.

Installation

$ npm install postcss-center

Usage

JavaScript

postcss([ require('postcss-center') ]);

TypeScript

import * as postcssCenter from 'postcss-center';

postcss([ postcssCenter ]);

Options

None at this time.

Testing

Run the following command:

$ npm test

This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.

Watching

For much faster development cycles, run the following commands in 2 separate processes:

$ npm run build:watch

Compiles TypeScript source into the ./dist folder and watches for changes.

$ npm run watch

Runs the tests in the ./dist folder and watches for changes.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100