Absolute Center

css_absolute_center.css

/*http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/*/

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

css_absolute_center_Css3Way.css

/*http://css-tricks.com/centering-in-the-unknown*/
/* This parent can be any width and height */

/*Didn't work for me when the parent element only had min-height*/

.block {
  text-align: center;
  /*May have to put height on it*/
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

css_absolute_center_negative.css

/*Compatible with all browsers but exact height and width dimensions must be known*/
/*<div class="Center-Container Clear">
        <div class="Center-Block is-Negative">
          <h4 class="Title">Absolute Center,<br> Negative Margins.</h4>
          <p>This box is absolutely centered vertically within its container using negative margins.</p>
        </div>
      </div>
*/
/*Read more here: http://codepen.io/shshaw/full/gEiDt#Negative-Margins */
.Center-Container {
  background: #2e5f3e;
  color: #4fa46b;
  width: 100%;
  height: 400px;
  margin: 20px auto 40px;
  clear: both;
  position: relative;
}

.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 */
}

.Center-Block {
  background: #4fa46b;
  color: #FFF;
  padding: 20px;
}

css_absolute_Center_Table.css

/*<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    <!-- CONTENT -->
    </div>
  </div>
</div>

Nick the .center-container styles from above files.
*/

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

css_center_page.html

<style type="text/css">
  .container
  {
  	height: 678px;
  	width: 1014px;
  	margin: -339px 0 0 -507px;
  	position: absolute;
  	left: 50%;
  	top: 50%;
  }
</style>

<div class="container">
  Easy peasy.
</div>

vertical_center_align.css

/* http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
/* IE9+ */
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/*Alternative*/
 display: table, table-cell and vertical-align: middle 
 
 /* .. but with an absolute position element inside requires extra relative positioned element.*/
 
 /*Alternative 2*/
 /*http://css-tricks.com/vertically-center-multi-lined-text/*/
 
 <!--[if lt IE 8]>
<style>
.bubble div { position: absolute; top:50%;} /*Wrap around another div*/
.bubble div p {position: relative; top: -50%}
</style>
<![endif]–>