title: CSS Alignment fail and Div height wrong
body: <p><strong>Example 1:</strong> I'm trying to center align various layers for a stacked logo effect on my page. When I can actually get the lower z-index layer to display properly the alignment is all out of place. </p>
  
  <p><strong>Example 2:</strong> I started over trying to debug everything and finally got all the alignments correct, but now the lower z-index layer won't expand to the correct dimensions to show the background.</p>
  
  <p><strong>Main Page HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;title&gt;DaellusKnights&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="keywords" content="" /&gt;
      &lt;meta name="author" content="Christopher Waguespack" /&gt;
      &lt;meta name="robots" content="index, follow" /&gt;
  
      &lt;meta property="og:title" content="DaellusKnights" /&gt;
      &lt;meta property="og:description" content="Coming soon! DaellusKnights will be a central hub for all of my various and diverse projects, as well as a community workshop for others to do the same." /&gt;
      &lt;meta property="og:type" content="website" /&gt;
      &lt;meta property="og:url" content="http://www.daellusknights.com" /&gt;
      &lt;meta property="og:image" content="http://i67.tinypic.com/117sp5w.png" /&gt;
  
      &lt;link rel="stylesheet" href="/css/dk-anim.css" type="text/css" media="screen" /&gt;
  
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="vertz gears rotating" style="z-index:10;"&gt;&lt;/div&gt;
  
  &lt;div class="vertz" style="z-index:100;"&gt;
      &lt;div class="logo"&gt;
          &lt;div&gt;&lt;h1&gt;Daellus&lt;br /&gt;Knights&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="content"&gt;
              &lt;div class="circle stop"&gt;&lt;/div&gt;
              &lt;div class="circle1 stop"&gt;&lt;/div&gt;
              &lt;B&gt;coming&lt;br /&gt;soon&lt;/B&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Main Page CSS</strong></p>
  
  <pre><code>@font-face {
    font-family: '1979rg';
    src: url('/fonts/1979rg__.eot');
    src: url('/fonts/1979rg__.woff2') format('woff2'),
         url('/fonts/1979rg__.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  * {
      font-family: "1979rg";
      font-weight: ;
      text-align: center;
      color:rgba(3,79,132,0.75);
      border: 1px solid gray;
  }
  
  html {
      height:100%;
  }
  
  body {
      background: lightblue url("/img/grid-bg.jpg") no-repeat fixed center;
      background-size: 100% 100%;
  
      width:100%;
      height:100%;
  }
  
  .vertz {
      position: relative;
      margin: 0px;
      padding: 0px;
  
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  
  .logo {
      position:relative;
      width:400px;
      top:3px;
      right:3px;
  
      margin:auto;
      padding-left:3px;
      padding-right:3px;
      padding-bottom:10px;
  }
  
  .logo h1{
      font-family: "1979rg";
      font-size:2em;
      font-weight:bolder;
      color: rgb(3,79,132);
      position: relative;
  }
  
  .gears {
      width:362px;
      height:362px;
      margin: auto;
      position: relative;
  
      background:url('/img/spinner-1a.png') no-repeat center;
      background-size:cover;
  
      z-index: 10;
  }
  
  /* =========== Spinner Animation ============== */
  
  @keyframes rotating {
      from
          {
          transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          }
      to
          {
          transform: rotate(360deg);
          -o-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          }
  }
  
  @-webkit-keyframes rotating {
      from
          {
          transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          }
      to
          {
          transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          }
  }
  
  .rotating
      {
      -webkit-animation: rotating 15s linear infinite;
      -moz-animation: rotating 15s linear infinite;
      -ms-animation: rotating 15s linear infinite;
      -o-animation: rotating 15s linear infinite;
      animation: rotating 15s linear infinite;
      }
  
  .spinner-1a {
      width: 362px;
      height: 362px;
      position: relative;
  }
  
  .spinner-1a:after {
      width: 362px;
      height: 362px;
      position: absolute;
      background: url("/img/spinner-1a.png") no-repeat center;
  
      -webkit-animation: spinX 20s infinite linear;
      animation: spinX 20s infinite linear;
  }
  </code></pre>
  
  <p><strong>Debug Page HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;link rel="stylesheet" href="debug.css" type="text/css" media="screen" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="debug.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;!-- Debug Mode Header --&gt;
      &lt;div&gt;
          &lt;h1&gt;Debug Mode!&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;!-- Container for BG-Spinner --&gt;
      &lt;div class="vertz layer1 rotating"&gt; &gt;What the fuck?!&lt; &lt;/div&gt;
  
      &lt;!-- Logo and L-spinner --&gt;
  &lt;div class="vertz" style="z-index:100;"&gt;
      &lt;div class="logo"&gt;
          &lt;div&gt;&lt;h1&gt;Daellus&lt;br /&gt;Knights&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="content"&gt;
              &lt;div class="circle stop"&gt;&lt;/div&gt;
              &lt;div class="circle1 stop"&gt;&lt;/div&gt;
              &lt;B&gt;coming&lt;br /&gt;soon&lt;/B&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Debug Page CSS</strong></p>
  
  <pre><code>@font-face {
    font-family: '1979rg';
    src: url('/fonts/1979rg__.eot');
    src: url('/fonts/1979rg__.woff2') format('woff2'),
         url('/fonts/1979rg__.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  * {
      font-family: "1979rg";
      font-weight: ;
      text-align: center;
      color:rgba(3,79,132,0.75);
  }
  
  html, body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
  }
  
  body {
      background: lightblue url("/img/grid-bg.jpg") no-repeat fixed center;
      background-size: 100% 100%;
  }
  
  div {
      position: relative;
  }
  
  h1{
      font-family: "1979rg";
      font-size:2em;
      font-weight:bolder;
      color: rgb(3,79,132);
      position: relative;
  }
  
  .vertz {
      position: relative;
      margin: 0px;
      padding: 0px;
  
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  
  .layer1 {
      width: 362px;
      height: 362x;
      margin: auto;
      position: relative;
  
      background: url("/img/spinner-1a.png") no-repeat center;
      background-size: cover;
  
      z-index:10;
  }
  
  @keyframes rotating {
      from
          {
          transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          }
      to
          {
          transform: rotate(360deg);
          -o-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          }
  }
  
  @-webkit-keyframes rotating {
      from
          {
          transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          }
      to
          {
          transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          }
  }
  
  .rotating
      {
      -webkit-animation: rotating 15s linear infinite;
      -moz-animation: rotating 15s linear infinite;
      -ms-animation: rotating 15s linear infinite;
      -o-animation: rotating 15s linear infinite;
      animation: rotating 15s linear infinite;
      }
  
  .circle {
      background-color: rgba(0,0,0,0);
      border:5px solid rgba(0,183,229,0.9);
      opacity:.9;
      border-right:5px solid rgba(0,0,0,0);
      border-left:5px solid rgba(0,0,0,0);
      border-radius:50px;
      box-shadow: 0 0 35px #2187e7;
      width:50px;
      height:50px;
      margin:0 auto;
      -moz-animation:spinPulse 1s infinite ease-in-out;
      -webkit-animation:spinPulse 1s infinite linear;
  }
  .circle1 {
      background-color: rgba(0,0,0,0);
      border:5px solid rgba(0,183,229,0.9);
      opacity:.9;
      border-left:5px solid rgba(0,0,0,0);
      border-right:5px solid rgba(0,0,0,0);
      border-radius:50px;
      box-shadow: 0 0 15px #2187e7; 
      width:30px;
      height:30px;
      margin:0 auto;
      position:relative;
      top:-50px;
      -moz-animation:spinoffPulse 1s infinite linear;
      -webkit-animation:spinoffPulse 1s infinite linear;
  }
  @-moz-keyframes spinPulse {
      0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
      50% { -moz-transform:rotate(145deg); opacity:1; }
      100% { -moz-transform:rotate(-320deg); opacity:0; }
  }
  @-moz-keyframes spinoffPulse {
      0% { -moz-transform:rotate(0deg); }
      100% { -moz-transform:rotate(360deg);  }
  }
  @-webkit-keyframes spinPulse {
      0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
      50% { -webkit-transform:rotate(145deg); opacity:1;}
      100% { -webkit-transform:rotate(-320deg); opacity:0; }
  }
  @-webkit-keyframes spinoffPulse {
      0% { -webkit-transform:rotate(0deg); }
      100% { -webkit-transform:rotate(360deg); }
  }
  </code></pre>