@mixin centerer($horizontal:true,$vertical:true){position:absolute;@if($horizontaland$vertical){top:50%;left:50%;transform:translate(-50%,-50%);}@elseif($horizontal){left:50%;transform:translate(-50%,0);}@elseif($vertical){top:50%;transform:translate(0,-50%);}}/* How to use the mixin */.parent{position:relative;background:#f06d06;width:50%;height:200px;margin:20pxauto;}.child{background:white;padding:20px;&.both{@include center;}&.horizontal{@include center(true,false);}&.vertical{@include center(false,true);}}
Comments (0)
HTTPSSSH
You can clone a snippet to your computer for local editing.
Learn more.