<div class="parent">
<div class="child both">I'm centered on both axis!</div>
</div>
<div class="parent">
<div class="child top">I'm centered top!</div>
</div>
<div class="parent">
<div class="child right">I'm centered right!</div>
</div>
<div class="parent">
<div class="child bottom">I'm centered bottom!</div>
</div>
<div class="parent">
<div class="child left">I'm centered left!</div>
</div>
@mixin center($pos:both ) {
position: absolute;
@if ($pos==both) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} @else if ($pos==top) {
left: 50%;
transform: translate(-50%, 0);
} @else if ($pos==left) {
top: 50%;
transform: translate(0, -50%);
} @else if ($pos==right) {
top: 50%;
right:0;
transform: translate(0, -50%);
} @else if ($pos==bottom) {
bottom: 0;
left:50%;
transform: translate(-50%, 0);
}
}
.parent {
position: relative;
background: #f06d06;
width: 50%;
height: 200px;
margin: 20px auto;
}
.child {
background: white;
padding: 20px;
&.both {
@include center(both);
}
&.top {
@include center(top);
}
&.right {
@include center(right);
}
&.bottom {
@include center(bottom);
}
&.left {
@include center(left);
}
}
body {
background: papayawhip;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.