Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="contain">
  <div id="ponyo">
    <h1>@include centerEl;</h1>
    <p>With this SCSS mixin you'll be able to horizontally AND vertically center blocks of text dynamically, with ease</p>
  </div>
</div>

<div class="contain">
  <div id="billmurray">
    <p>To use it, just <code>@include centerEl</code></p>
    <p>You can set some properties through parameters too, like the <code>left</code> position, <code>width</code> and <code>text-align</code>.</p>
    <p><small>Defaults: <code>$left: 50%, $width: 50%, $align: center</code></small></p>
  </div>
</div>

<div class="contain">
  <div id="jeffgolenski">
    <p>But you don't have to horizontally align if you don't want to. Just include the mixin like this...</p>
    <code>@include centerEl($left: 95%, $align: left);</code>
  </div>
</div>

<div class="contain">
  <div id="poppop">
    <p>Or you can include the mixin like this...</p>
    <code>@include centerEl($left: 5%, $width: auto, $align: left);</code>
  </div>
</div>

<div class="contain">
  <div id="cred">
    <p>Forked and adapted from a <a href="http://jsfiddle.net/jeffgolenski/hchhT/13/" target="_blank">Fiddle</a> by <a href="https://twitter.com/jeffgolenski" target="_blank">@jeffgolenski</a></p>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$base: #94c6fd;

@function dynamicColor ($color) {
  @if ( lightness($color) < 50% ) {
    @return #eee;
  } @else {
    @return #111;
  }
}

@mixin centerEl ( $left: 50%, $width: 50%, $align: center ) {
  position: absolute;
  top: 50%;
  left: $left;
  -ms-transform: translate($left * -1,-50%);
  -webkit-transform: translate($left * -1,-50%);
  transform: translate($left * -1,-50%);
  width: $width;
  > * {
    display: block;
    padding: 0 10px;
    text-align: $align;
    width: 100%;
  }
}

body {
  background: $base;
  padding: 3em;
  
  .contain {
    background: white;
    box-shadow: 0 2px 2px darken($base, 15%);
    color: #111;
    font-size: 1.3em;
    height: 300px; max-width: 1000px; width: 100%;
    margin: 0 auto;
    text-shadow: 0 1px 2px rgba(black, 0.4);
    position: relative;
    + .contain {
      margin-top: 3em;
    }
    a {
      color: dynamicColor($base);
    }
  }
}

#ponyo, #billmurray {
  @include centerEl;
}

#jeffgolenski {
  @include centerEl($left: 95%, $align: left);
}

#poppop {
  @include centerEl($left: 5%, $width: auto, $align: left);
}

#cred {
  @include centerEl($width: 80%)
}

SassMeister-output.css

body {
  background: #94c6fd;
  padding: 3em;
}
body .contain {
  background: white;
  box-shadow: 0 2px 2px #499efc;
  color: #111;
  font-size: 1.3em;
  height: 300px;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  position: relative;
}
body .contain + .contain {
  margin-top: 3em;
}
body .contain a {
  color: #111111;
}

#ponyo, #billmurray {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50%;
}
#ponyo > *, #billmurray > * {
  display: block;
  padding: 0 10px;
  text-align: center;
  width: 100%;
}

#jeffgolenski {
  position: absolute;
  top: 50%;
  left: 95%;
  -ms-transform: translate(-95%, -50%);
  -webkit-transform: translate(-95%, -50%);
  transform: translate(-95%, -50%);
  width: 50%;
}
#jeffgolenski > * {
  display: block;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}

#poppop {
  position: absolute;
  top: 50%;
  left: 5%;
  -ms-transform: translate(-5%, -50%);
  -webkit-transform: translate(-5%, -50%);
  transform: translate(-5%, -50%);
  width: auto;
}
#poppop > * {
  display: block;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}

#cred {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
}
#cred > * {
  display: block;
  padding: 0 10px;
  text-align: center;
  width: 100%;
}

SassMeister-rendered.html

<div class="contain">
  <div id="ponyo">
    <h1>@include centerEl;</h1>
    <p>With this SCSS mixin you'll be able to horizontally AND vertically center blocks of text dynamically, with ease</p>
  </div>
</div>

<div class="contain">
  <div id="billmurray">
    <p>To use it, just <code>@include centerEl</code></p>
    <p>You can set some properties through parameters too, like the <code>left</code> position, <code>width</code> and <code>text-align</code>.</p>
    <p><small>Defaults: <code>$left: 50%, $width: 50%, $align: center</code></small></p>
  </div>
</div>

<div class="contain">
  <div id="jeffgolenski">
    <p>But you don't have to horizontally align if you don't want to. Just include the mixin like this...</p>
    <code>@include centerEl($left: 95%, $align: left);</code>
  </div>
</div>

<div class="contain">
  <div id="poppop">
    <p>Or you can include the mixin like this...</p>
    <code>@include centerEl($left: 5%, $width: auto, $align: left);</code>
  </div>
</div>

<div class="contain">
  <div id="cred">
    <p>Forked and adapted from a <a href="http://jsfiddle.net/jeffgolenski/hchhT/13/" target="_blank">Fiddle</a> by <a href="https://twitter.com/jeffgolenski" target="_blank">@jeffgolenski</a></p>
  </div>
</div>