tankbar · February 20, 2018 22:22 · Feb 20, 2018
diff --git a/_truly-centered.scss b/_truly-centered.scss
@@ -0,0 +1,14 @@
+@mixin centerer($horizontal: true, $vertical: true) {
+  position: absolute;
+  @if ($horizontal and $vertical) {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  } @else if ($horizontal) {
+    left: 50%;
+    transform: translate(-50%, 0);
+  } @else if ($vertical) {
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+}
diff --git a/example.html b/example.html
@@ -0,0 +1,11 @@
+<div class=“parent”>
+  <div class=“child both”>I’m centered on both axis!</div>
+</div>
+
+<div class=“parent”>
+  <div class=“child horizontal”>I’m centered horizontally!</div>
+</div>
+
+<div class=“parent”>
+  <div class=“child vertical”>I’m centered vertically!</div>
+</div>
diff --git a/example.scss b/example.scss
@@ -0,0 +1,17 @@
+.parent {
+ position: relative;
+}
+
+.child {
+ &.both {
+   @include centerer;
+ }
+
+ &.horizontal {
+   @include centerer(true, false);
+ }
+
+ &.vertical {
+   @include centerer(false, true);
+ }
+}