Newsworthy Presidential Mistakes

    postcss-center
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    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.

    Install

    npm i postcss-center

    DownloadsWeekly Downloads

    241

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • jedmao