Tests updated

lib/mixins/_position.scss

@@ -20,6 +20,7 @@
   * Vertical Center
   */
 @mixin center-vertical(){
+	position: absolute;
 	top: 50%;
 	@include transform(translateY(-50%));
 }
@@ -32,6 +33,7 @@
  */
 @mixin center-horizontal($type: absolute){
 	@if $type == absolute {
+		position: absolute;
 		left: 50%;
 		@include transform(translateX(-50%));
 	}

tests/index.html

@@ -23,6 +23,13 @@
 				border: 1px solid #ccc;
 				border-radius: 3px;
 			}
+
+			.centering {
+				position: relative;
+				width: 100%;
+				height: 150px;
+				background: #fafafa;
+			}
 		</style>
 	</head>
 
@@ -103,6 +110,49 @@ <h3 class="test-heading">Radial Gradient</h3>
 				</article>
 			</section>
 
+			<section class="tests">
+				<h2 class="tests-heading">Position Mixins</h2>
+
+				<article class="test">
+					<h3 class="test-heading">Center</h3>
+
+<pre>
+.center {
+  @include center();
+}
+</pre>
+					<p class="single-test centering">
+						<span class="center">This element should be centered both vertical and horizontal</span>
+					</p>
+				</article>
+
+				<article class="test">
+					<h3 class="test-heading">Vertical Center</h3>
+
+<pre>
+.center-vertical {
+  @include center-vertical();
+}
+</pre>
+					<p class="single-test centering">
+						<span class="center-vertical">This element should be centered vertically</span>
+					</p>
+				</article>
+
+				<article class="test">
+					<h3 class="test-heading">Horizontal Center</h3>
+
+<pre>
+.center-horizontal {
+  @include center-horizontal();
+}
+</pre>
+					<p class="single-test centering">
+						<span class="center-horizontal">This element should be centered horizontally</span>
+					</p>
+				</article>
+			</section>
+
 			<section class="tests">
 				<h2 class="tests-heading">Text Mixins</h2>
 

tests/tests.scss

@@ -79,6 +79,21 @@
 	}
 }
 
+// @mixin center()
+.center {
+	@include center();
+}
+
+// @mixin center-vertical()
+.center-vertical {
+	@include center-vertical();
+}
+
+// @mixin center-horizontal()
+.center-horizontal {
+	@include center-horizontal();
+}
+
 // @mixin arrow($color, $size, $direction, $el)
 .arrow-top {
 	@include arrow(lightblue, 10px);