PostCSS plugin to center elements.
PostCSS plugin to center elements.
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!
top
or left
is not center
it will be preserved. If both are not center
, this plugin will do nothing!position
it will only be preserved if its value is relative
or fixed
. All other values will be replaced with absolute
.position
of relative
or the value of left
is not center
, the margin-right
declaration will not be inserted.$ npm install postcss-center
postcss([ require('postcss-center') ]);
import * as postcssCenter from 'postcss-center';
postcss([ postcssCenter ]);
None at this time.
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.
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.