Skip to content

jednano/postcss-center

Repository files navigation

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.

About

PostCSS plugin to center elements.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published