A CodePen by Shaw. Absolute Centering - Perfect horizontal AND vertical centering in CSS, at any width or height! Works with percentage based width/height, min-/max- width, images, position: fixed and even variable content heights.

index.html

<div class="Modal-Background toggle-Modal">
  <div class="Center-Block Absolute-Center is-Fixed Modal" id="Fixed-Modal">
    <h1 class="Title">Absolute Center.</h1>

    <p>This box is absolutely centered within the viewport, horizontally and vertically, using only CSS.</p>

    <p>Click me to learn more.</p>
  </div>
</div>

<nav id="Navigation">
  <a href="#Overview">Absolute Centering</a>
  <a href="#Relative">Within Container</a>
  <a href="#Fixed">Within Viewport</a>
  <a href="#Responsive">Responsive</a>
  <a href="#Offsets">Offsets</a>
  <a href="#Overflow">Overflow</a>
  <a href="#Images">Images</a>
  <a href="#Height">Variable Height</a>
  <a href="#Other">Other Techniques</a>
  <a href="#Recommendations">Recommendations</a>
</nav>

<article class="Content">
  <header id="Overview">
    <h1>Absolute Centering in CSS</h1>

    <p>We've all seen <code>margin: 0 auto;</code> for horizontal centering, but <code>margin: auto;</code> has refused to work for vertical centering... <em>until now!</em></p>

    <p><strong>Spoiler alert:</strong> Absolute Centering only requires a declared height and these styles:</p>
    <pre>.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}</pre>
    <p>I'm not the pioneer of this method (yet I have dared to name it <em>Absolute Centering</em>), and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a <a href="http://designshack.net/articles/css/how-to-center-anything-with-css" target="_blank">particular article</a>.</p>

    <p>There, <a href="http://designshack.net/articles/css/how-to-center-anything-with-css/#comment-684580538" target="_blank">Simon</a> linked to this <a href="http://jsfiddle.net/mBBJM/1/" target="_blank">jsFiddle</a> that blew every other method out of the water (the same method was also mentioned by <a href="http://designshack.net/articles/css/how-to-center-anything-with-css/#comment-684580409" target="_blank">Priit</a> in the comments). Researching further, I had to use very specific keywords to find <a href="http://www.vanseodesign.com/css/vertical-centering/">some</a> <a href="http://www.student.oulu.fi/~laurirai/www/css/middle/" target="_blank">other</a> <a href="http://blog.themeforest.net/tutorials/vertical-centering-with-css/" target="_blank">sources</a> for this method.</p>

    <p>Having never used this technique before, I put it to the test and discovered how incredible Absolute Centering really is.</p>
    
    <div class="Advantages Float-Left">
    <h3>Advantages:</h3>
    <ul>
    <li>Cross-browser (including IE8-10 without hacks!)</li>
    <li>No special markup, minimal styles</li>
    <li>Responsive with percentages and min-/max-</li>
    <li>Centered regardless of padding (without <code>box-sizing</code>!)</li>
    <li>Works great on images</li>
    </ul>
    </div>
    
    <div class="Caveats Float-Right">
    <h3>Caveats:</h3>
    <ul>
    <li>Height must be declared (see <a href="#Height">Variable Height</a>)</li>
    <li>Recommend setting <code>overflow: auto</code> to prevent content spillover (see <a href="#Overflow">Overflow</a>)</li>
    <li>Doesn't work on Windows Phone</li>
    </ul>
    </div>
    <div class="Clear"></div>
<!--
    <ul>
      <li>Requires no unnecessary elements or special markup on container elements.</li>
      <li>Perfectly centers in all major browsers, including IE8-10, without any hacks.</li>
      <li><a href="#Responsive">Responsive</a>, working flawlessly with percentage based widths and heights and even min-/max-.</li>
      <li>Element is centered regardless of padding, no need for box-sizing!</li>
      <li>Supports <a href="#Offsets">offsets and aligning to the left or right</a> while maintaining vertical center.</li>
      <li>Images work easily without a need for a set height.</li>
    </ul> -->

		<h3>Browser Compatibility:</h3>
    <p><strong> Chrome, Firefox, Safari, Mobile Safari, IE8-10.</strong><br />Absolute Centering was tested and works flawlessly in the latest versions of Chrome, Firefox, Safari, Mobile Safari, and even IE8-10.</p>
    
    <p>One user reported that the content is not vertically centered in Windows Phone's browser, but otherwise this technique works as expected.</p>

    <p><em>If you find any additional features or issues, <a href="http://codepen.io/shshaw/details/gEiDt">leave a comment in CodePen</a> or tweet to <a href="http://twitter.com/shshaw" target="_blank">@shshaw</a>!</em></p>

  </header>

  <section id="Relative">
    <h2>Within Container</h2>

    <p>Place your content block inside of a <code>position: relative</code> container to perfectly center your content within the container!</p>

    <pre>.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}</pre>

    <div class="Container">
      <div class="Center-Block Absolute-Center">
        <h1 class="Title">Absolute Center,<br />Within Container.</h1>

        <p>This box is absolutely centered, horizontally and vertically, within its container using <br /><code>position: relative</code></p>
      </div>
    </div>
  </section>

  <section id="Fixed">
    <h2>Within Viewport</h2>

    <p>Set your content block to <code>position: fixed</code> and give it a z-index, like the modal on this page, to keep it centered in the viewport.</p>
    
    <ul class="Caveats">
      <li><strong>Mobile Safari:</strong> The content block will be centered vertically in the whole document, not the viewport, if it is not within a <code>position: relative</code> container.</li>
    </ul>

    <pre>.Absolute-Center.is-Fixed {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 999;
}</pre>

    <a class="toggle-Modal Button" href="#">Show/Hide Modal.</a>

  </section>

  <section id="Responsive">
    <h2>Responsive</h2>

    <p>Perhaps the best benefit of Absolute Centering is percentage based width/heights work perfectly! Even <code>min-width/max-width</code> and <code>min-height/max-height</code> styles behave as expected for more responsive boxes.</p>

    <p>Go ahead, add padding to the element; Absolute Centering doesn't mind!</p>
    <pre>
.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 400px;
  max-width: 500px;
  padding: 40px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
</pre>

    <div class="Container">
      <div class="Center-Block Absolute-Center is-Responsive">
        <h1 class="Title">Absolute Center,<br />Percentage Based.</h1>

        <p>This box is absolutely centered, horizontally and vertically, even with percentage based widths &amp; height, min-/max-, and padding!</code></p>
      </div>
    </div>
  </section>

  <section id="Offsets">
    <h2>Offsets</h2>

    <p>If you have a fixed header or need to add other offsets, simply add it in your content block's styles like <code>top: 70px;</code>. As long as <code>margin: auto;</code> is declared, the content block will be vertically centered within the bounds you declare with <code>top</code> <code>left</code> <code>bottom</code> and <code>right</code> </p>

    <p>You can also stick your content block to the right or left while keeping it vertically centered, using <code>right: 0; left: auto;</code> to stick to the right or <code>left: 0; right: auto;</code> to stick to the left.</p>

    <pre>.Absolute-Center.is-Right {
  width: 50%;
  height: 50%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: auto; bottom: 0; right: 20px;
  text-align: right;
}</pre>

    <div class="Container">
      <div class="Center-Block Absolute-Center is-Right">
        <h1 class="Title">Vertical Center,<br /> Align Right.</h1>

        <p>This box is absolutely centered vertically within its container, but stuck to the right with <br /><code>right: 0; left: auto;</code></p>
      </div>
    </div>
  </section>

  <section id="Overflow">
    <h2>Overflow</h2>

    <p>Content taller than the block or container (viewport or a <code>position: relative</code> container) will overflow and may spill outside the content block and container or even be cut off. Simply adding <code>overflow: auto</code> will allow the content to scroll within the block as long as the content block itself isn't taller than its container (perhaps by adding <code>max-height: 100%;</code> if you don't have any padding on the content block itself).</p>
    
    <pre>.Absolute-Center.is-Overflow {
  width: 50%;
  height: 300px;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}</pre>

    <div class="Container">
      <div class="Center-Block Absolute-Center is-Overflow">
        <h1 class="Title">Absolute Center,<br /> With Overflow.</h1>

        <p>This box is absolutely centered within its container, with content set to overflow.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>

<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>
      </div>
    </div>
  </section>

  <section id="Images">
    <h2>Images</h2>

    <p>Images work too! Apply the class/style to the image itself and set <code>height: auto;</code> like you would with a responsively-sized image to let it resize with the container.</p>

    <p>Note that <code>height: auto;</code> works for images, but causes a regular content block to stretch to fill the container unless you use the <a href="#Height">variable height technique</a>. It's likely that because browsers have to calculate the height for the image rendered image, so <code>margin: auto;</code> ends up working as if you'd declared the height in all tested browsers.</p>

    <pre>.Absolute-Center.is-Image {
  width: 50%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}</pre>

    <div class="Container">
      <img alt="" src="http://placekitten.com/g/500/200" class="Center-Block Absolute-Center is-Image" />
    </div>
  </section>

  <section id="Height">
    <h2>Variable Height</h2>

    <p>Absolute Centering does require a declared height, however the height can be percentage based and controlled by <code>max-height</code>. This makes it ideal for responsive scenarios, just make sure you set an appropriate <a href="#Overflow">overflow</a>.</p>
    
    <p>One way around the declared height is adding <code>display: table</code>, centering the content block regardless of content length.</p>
    
    <div class="Caveats">
    <strong>Caveats:</strong> This will break cross-browser compatibility. You may want to consider the <a href="#Table-Cell">Table-Cell</a> method in this case.
    <ul>
      <li><strong>Firefox/IE8:</strong> Using <code>display: table</code> aligns the content block to the top, but is still centered horizontally.</li>
      
      <li><strong>IE9/10:</strong> Using <code>display: table</code> aligns the content block to the top left.</li>

      <li><strong>Mobile Safari:</strong> The content block is centered vertically, but becomes slightly off-center horizontally when using percentage based widths.</li>
    </ul>
    </div>
    
    <pre>
.Absolute-Center.is-Variable {
  display: table;
  width: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
</pre>

    <div class="Container">
      <div class="Center-Block Absolute-Center is-Variable">
        <h1 class="Title">Absolute Center,<br /> Variable Height.</h1>

        <p>This box is absolutely centered vertically within its container, regardless of content height.</p>
      </div>
    </div>
  </section>
  
  
  <section id="Other">
    <h2>Other Techniques</h2>
    <p><strong>Absolute Centering</strong> works really well for many cases, but there are other methods that may fit more specific needs. The most commonly recommended methods are <strong><a href="#Negative-Margins">Negative Margins</a></strong>, <strong><a href="#Transforms">Transforms</a></strong>, <strong><a href="#Table-Cell">Table-Cell</a></strong>, and now <strong><a href="#Flexbox">Flexbox</a></strong>. These techniques are covered more in depth in other articles, so I'll only go over the basics here.</p>

    <div id="Negative-Margins" class="Technique clearfix">
      
      <pre class="Float-Right">.is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}
      </pre>
      
      <h3>Negative Margins</h3>
      <p>Perhaps the most common technique. If exact dimensions are known, setting a negative margin equal to half the width/height (plus padding, if not using <code>box-sizing: border-box</code>) along with <code>top: 50%; left: 50%;</code> will center the block within a container.</p>
      
      <div class="Advantages">
      	<strong>Advantages:</strong>
      	<ul>
      	<li>Works well cross-browser</li>
      	<li>Requires minimal code</li>
	    	</ul>
	    </div>
	    
	    <div class="Caveats">
	    	<strong>Caveats:</strong> 
	    	<ul>
     		<li>Not responsive. Doesn't work for percentage based dimensions and can't set min-/max-</li>
     		<li>Content can overflow the container</li>
     		<li>Have to compensate for <code>padding</code> or use <code>box-sizing: border-box</code></li>
     		</ul>
     	</div>
      
      <div class="Container Clear">
        <div class="Center-Block is-Negative">
          <h1 class="Title">Absolute Center,<br /> Negative Margins.</h1>
          <p>This box is absolutely centered vertically within its container using negative margins.</p>
        </div>
      </div>
    </div>
            
        
    <div id="Transforms" class="Technique clearfix">
      
      <pre class="Float-Right">.is-Transformed { 
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
      </pre>
      
      <h3>Transforms</h3>
      <p>One of the simplest techniques with about the same benefits as Absolute Centering, but supports variable height. Give the content block <code>transform: translate(-50%,-50%)</code> with the required vendor prefixes along with <code>top: 50%; left: 50%;</code> to get it centered.</p>
      
      <div class="Advantages">
      	<strong>Advantages:</strong>
      	<ul>
      	<li>Variable height content</li>
      	<li>Requires minimal code</li>
      	</ul>
      </div>
      
      <div class="Caveats">
      	<strong>Caveats:</strong> 
      	<ul>
      	<li>Won't work in IE8</li>
      	<li>Need vendor prefixes</li>
      	<li>Can interfere with other <code>transform</code> effects</li>
      	<li>Results in blurry rendering of edges and text in some cases</li>
      	</ul>
      </div>
      
      <p><a href="http://css-tricks.com/centering-percentage-widthheight-elements/" target="_blank">Read more about Transform Centering</a>
      
      <div class="Container Clear">
        <div class="Center-Block is-Translated">
          <h1 class="Title">Absolute Center,<br /> Translate(-50%,-50%).</h1>
          <p>This box is absolutely centered vertically within its container using <code>translate(-50%,-50%)</code>.</p>
        </div>
      </div>
    </div>
    

    <div id="Table-Cell" class="Technique clearfix">
      <div class="Float-Right">
      Markup:
      <pre>
&lt;div class="Container is-Table"&gt;
  &lt;div class="Table-Cell"&gt;
    &lt;div class="Center-Block"&gt;
    &lt!-- CONTENT --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
      </pre>
      
      Styles:
      <pre>.Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}
      </pre>
      </div>
      <h3>Table-Cell</h3>
      <p>This may be the best technique overall, simply because the height can vary with the content and browser support is great. The main disadvantage is the extra markup, requiring a total of three elements to get the final one centered.</p>
      
      <div class="Advantages">
      	<strong>Advantages:</strong>
      	<ul>
      	<li>Variable height content</li>
      	<li>Content overflows appropriately</li>
      	<li>Works well cross-browser</li>
      	</ul>
      </div>
      
      <div class="Caveats">
      	<strong>Caveats:</strong>
      	<ul>
      	<li>Requires extra markup</li>
      	</ul>
      </div>
      
      <p><a href="http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/" target="_blank">Read more about Table-Cell Centering</a>
      
      <div class="Container is-Table Clear">
        <div class="Table-Cell">
          <div class="Center-Block">
            <h1 class="Title">Absolute Center,<br /> Table/Table-Cell.</h1>
            <p>This box is absolutely centered vertically within its <code>display: table-cell</code> parent, which is within a <code>display: table</code> container.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div id="Flexbox" class="Technique clearfix">
      <pre class="Float-Right">.Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
      </pre>
      <h3>Flexbox</h3>
      <p>The future of layout in CSS, Flexbox is the latest CSS spec designed to solve common layout problems such as vertical centering. Smashing Magazine already has a great article on <a href="http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/" target="_blank">Centering Elements with Flexbox</a> that you should read to for a more complete overview. Keep in mind that Flexbox is more than just a way to center, it can be used for columns and all sorts of crazy layout problems.</p>
      
      <div class="Advantages">
      	<strong>Advantages:</strong>
      	<ul>
      	<li>Content can be any width or height, even overflows gracefully</li>
      	<li>Can be used for more advanced layout techniques.</li>
      	</ul>
    	</div>
    	
    	<div class="Caveats">
    		<strong>Caveats:</strong> 
    		<ul>
    		<li>No IE8-9 support</li>
    		<li>Requires a container or styles on the body</li>
    		<li>Requires <a href="http://css-tricks.com/using-flexbox/">many vendor prefixes with different syntaxes</a> to work on modern browsers</li>
    		<li>Possible <a href="http://css-tricks.com/does-flexbox-have-a-performance-problem/">performance issues</a></li>
    		</ul>
    	</div>
    	
    	<a href="http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/" target="_blank">Read more about Flexbox</a>
      
      <div class="Container is-Flexbox Clear">
        <div class="Center-Block">
          <h1 class="Title">Absolute Center,<br /> Flexbox.</h1>
          <p>This Flexbox box is absolutely centered vertically within its container.</p>
        </div>
      </div>
    </div>

  </section>
  
  <section id="Recommendations">
    <h2>Recommendations</h2>

    <p>Each technique has their advantages. Which one you choose mainly boils down to which browsers you support and what your existing structure looks like.</p>
    
    <p><strong>Absolute Centering</strong> works great as a simple drop-in solution with no-fuss. Anywhere you used <a href="#Negative-Margins">Negative Margins</a> before, use Absolute Centering instead. You won't have to deal with pesky math for the margins or extra markup, and you'll be able to size your boxes responsively.</p>
    
    <p>If you need variable height content cross-browser, try out the <a href="#Table-Cell">Table-Cell</a> or <a href="#Flexbox">Flexbox</a> techniques to see what works best for your site.</p>
  </section>
</article>


<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<![endif]-->

script.js

// Simple show/hide modal
$(".toggle-Modal").on("click",function(e){
  $(".Modal-Background").toggleClass("is-Hidden");
  e.preventDefault();
});

// Don't show modal on load in mobile webkit because of the document centering issue.
ua = navigator.userAgent,
isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);
if ( isMobileWebkit ) { $(".Modal, .Modal-Background").addClass("is-Hidden"); }

// Unneccessary Scroll Functionality :-)
var lastId,
    topMenu = $("#Navigation"),
    topMenuHeight = topMenu.outerHeight()+0,
    menuItems = topMenu.find("a"),
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

menuItems.click(function(e){
    var href = $(this).attr("href"),
        offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
    $('html, body').stop().animate({ 
        scrollTop: offsetTop
    }, 600);
    e.preventDefault();
});

function highlightNav() {
   var fromTop = $(window).scrollTop()+topMenuHeight;
   var cur = scrollItems.map(function(){ if ($(this).offset().top < fromTop) { return this; } });
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   console.log("id",id);
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .removeClass("is-Current")
         .filter("[href=#"+id+"]").addClass("is-Current");
   }   
}
highlightNav();
$(window).scroll( highlightNav );

style.less

/* Here's the meat & potatoes! */
.Absolute-Center { 
  height: 50%;
  width: 50%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}


/* Fixed floating element */
.Absolute-Center.is-Fixed { 
  position: fixed;
  z-index: 999;
}


/* Min/Max Width */
.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 400px;
  max-width: 500px;
  padding: 40px;
}


/* Align Right, still vertically centered */
.Absolute-Center.is-Right { 
  left: auto;
  right: 20px;
  text-align: right;
}


/* Responsive image, still absolutely centered! Apply the classes to the image itself. */
.Absolute-Center.is-Image { 
	width: 50%;
	height: auto;
	padding: 0;
}
.Absolute-Center.is-Image img { 
	width: 100%;
	height: auto;
}


/* Set content overflow if your content may go too long */
.Absolute-Center.is-Overflow { 
	height: 250px;
	max-height: 100%;
	overflow: auto;
}


/* Variable content height with display: table; Breaks cross browser compatibility. */
.is-Variable {
  display: table; 
  height: auto;/* Only necessary because height was already declared */
}



/* //////////////////////////////////////// */
/* Other Techniques  */


/* Negative Margin Technique */
.is-Negative {
  width: 300px;
  height: 200px;
  padding: 20px;
  position: absolute;
  top: 50%; left: 50%;
  margin-left: -170px; /* (width + padding)/2 */
  margin-top: -120px; /* (height + padding)/2 */
}


/* Display: Table Technique */
.Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
	width: 50%;
	margin: 0 auto;
}


/* Transform Technique */
.is-Translated {
	width: 50%;
	margin: auto;
	position: absolute;
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}


/* Flexbox Technique */
.Container.is-Flexbox {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	   -moz-box-align: center;
	   -ms-flex-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-box-pack: center;
	   -moz-box-pack: center;
	   -ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
}



/* //////////////////////////////////////// */
/* Presentational Code. You can ignore this!  */

.Center-Block { 
  background: @green;
  color: #FFF;
  padding: 20px;
}
.Center-Block .Title { font-size: 2em; }
.no-js .is-Fixed { display: none; }

@green: #4fa46b;
@greenDark: #2e5f3e;
html, body { height: 100%; }
body { background: #FFF; color: #444; padding: 40px 20px; font: 300 16px/24px "Helvetica Neue", Helvetica, sans-serif; }
h1, h2, h3 { line-height: 1em; margin: 0 0 .5em; }
h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
ul, ol { padding-left: 20px; }
.Container { background: @greenDark; color: @green; width: 100%; height: 350px; margin: 20px auto 40px; position: relative; }
.Modal { border: solid 5px @greenDark; box-shadow: 0 0 20px rgba(0,0,0,0.25);  }
.Modal-Background { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #000; background: fade(#000,85%); z-index: 3; }
.toggle-Modal { cursor: pointer; }
.is-Hidden { display: none; }
#Navigation { position: fixed; top: 0; left: 0; right: 0; text-align: center; padding: 10px 10px; background: @green; z-index: 2; font-size: 11px; line-height: 20px; box-shadow: inset 0 -20px 20px -20px @greenDark; }
#Navigation a { color: #FFF; display: inline-block; padding: 0px 5px; border-radius: 2px; }
#Navigation a.is-Current { background: @greenDark; text-decoration: none; }
.Content { min-width: 500px; max-width: 800px; margin: 0 auto; }
header,
section { margin: 0; padding: 60px 0 60px; border-bottom: dotted 1px #ccc; &:last-child { border-bottom: 0; } }
.Technique { margin: 20px 0; padding: 40px 0; border-top: solid 1px #ddd; }
.Technique .Container { background: desaturate(@greenDark,15%); }//#455a6c; }
.Technique .Center-Block { background: desaturate(@green,15%); } //#5785ad; }
pre,
code { background: #eee; padding: 1px 7px; border-radius: 3px; font-size: 0.8em; }
.Center-Block code { color: #555; }
pre { display: block; width: 55%; padding: 10px 10px; margin: 20px auto; box-shadow: inset 1px 1px 4px #ddd; border-radius: 5px; line-height: 1.25em; overflow: auto; box-sizing: border-box; }
.Float-Left,
.Float-Right { margin-bottom: 20px; max-width: 40%; }
.Float-Right { float: right; margin-left: 20px; }
.Float-Left { float: left; margin-right: 20px; }
.Float-Left pre,
.Float-Right pre { width: 100%; margin: 0; }
.Clear { clear: both; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.Caveats { color: #a73529; }
.Advantages { color: @greenDark; }
.Advantages,
.Caveats { font-size: 0.9em; line-height: 1.25em; }
.Advantages ul,
.Caveats ul { margin: 0 0 20px; }
a { color: @green; text-decoration: none; transition: all 150ms ease; border-bottom: dotted 1px transparent; }
a:hover { color: @greenDark; text-decoration: underline; }
p { margin-bottom: 20px; }
p:last-child, .Technique:last-child, section:last-child, .Container:last-child { margin-bottom: 0; }
.Button { display: block; width: 50%; margin: 0 auto;  padding: 10px 20px; text-align: center; background: @greenDark; color: #FFF; font-weight: bold;   
  &:hover { background: @green; color: #FFF; text-decoration: none; }
}