<div class="box-wrap">
<h3>center both</h3>
<div class="box center-both"></div>
</div>
<div class="box-wrap">
<h3>center vertical</h3>
<div class="box center-vertical"></div>
</div>
<div class="box-wrap">
<h3>center horizontal</h3>
<div class="box center-horizontal"></div>
</div>
//////////////////////
//Mixin
//////////////////////
.center(@horizontal: true, @vertical: true) {
position: absolute;
& when ( @horizontal = true ) and ( @vertical = true ) {top: 50%;left: 50%;transform: translate(-50%, -50%);}
& when ( @horizontal = true ) and ( @vertical = false ) {left: 50%;transform: translate(-50%, 0);}
& when ( @horizontal = false ) and ( @vertical = true ) {top: 50%;transform: translate(0, -50%);}
}
//////////////////////
//Boring shit
//////////////////////
body{text-align: center;}
.box-wrap{
width: 200px;height: 200px;background: #ebebeb;margin: 60px 20px;display: inline-block;position: relative;
h3{margin-top: -30px;position: absolute;}
}
//////////////////////
//Mixin Application
//////////////////////
.box{
background: aqua;width: 100px;height: 100px;
&.center-both{
.center();
}
&.center-vertical{
.center(false);
// right:0; //TOGGLE
}
&.center-horizontal{
.center(true, false);
// bottom: 0; //TOGGLE
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.