postcss-center

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.