<div class="box-wrap">
  <h3>Both</h3>
  <div class="box center-both"></div>
</div>
<div class="box-wrap">
  <h3>Vertical</h3>
  <div class="box center-vertical"></div>
</div>
<div class="box-wrap">
  <h3>Horizontal</h3>
  <div class="box center-horizontal"></div>
</div>

@import 'lesshat';

/* =============================================
	An even simpler LESS Centering Mixin
	Written by Stephen Ginn on 10/09/16

	Both: 			  .center();
	Horizontal: 	.center('X');
	Vertical: 		.center('Y');
============================================= */

.center(@axis: XY) {
	position: absolute;
  /* subpixel blurriness fix */
	.perspective(1px);
	
	& when (@axis = XY) {
		left: 50%; top: 50%;
		.translate(-50%, -50%);
	}
	& when (@axis = X) {
		left: 50%;
		.translate(-50%, 0);
	}
	& when (@axis = Y) {
		top: 50%;
		.translate(0, -50%);
	}
}

/* Page Styles */
body{text-align: center; background: #3d3d3e;}

.box-wrap{
  width: 150px; height: 150px;
  background: #666;
  margin: 60px 20px;
  display: inline-block;
  position: relative;
  
  h3{
    margin-top: -30px;
    position: absolute;
    color: white;
  }
}

.box{
  background: #ccc;
  width: 75px; height: 75px;
}

/* How to initialize */
.center-both{.center();}
.center-vertical{.center(Y);}
.center-horizontal{.center(X);}