title: Why my overlay div is not centering
body: <p>I am sure it is a "simple" for the pros:</p>
  
  <p>I am at lost on how to center (horizontally and vertically) the <strong>overlay</strong> to its parent. Please see the jsfiddle link for the details. </p>
  
  <p>Thank you in advance for your time...</p>
  
  <p>LB</p>
  
  <pre><code>&lt;div class="grandparent"&gt;
      &lt;div class="parent"&gt;
          &lt;!-- 1st row */ --&gt;
          &lt;div class="child"&gt;1-1&lt;/div&gt;
          &lt;div class="child"&gt;1-2&lt;/div&gt;
          &lt;div class="child"&gt;1-3&lt;/div&gt;
  
          &lt;!-- 2nd row */ --&gt;
          &lt;div class="child"&gt;2-1&lt;/div&gt;
          &lt;div class="child"&gt;2-2&lt;/div&gt;
          &lt;div class="child"&gt;2-3&lt;/div&gt;
  
          &lt;!-- 3rd row */ --&gt;
          &lt;div class="child"&gt;3-1&lt;/div&gt;
          &lt;div class="child"&gt;3-2&lt;/div&gt;
          &lt;div class="child"&gt;3-3&lt;/div&gt;
  
  
          &lt;div class="overlay"&gt;
              Overlaysdfds 
              line2sdf sdfdsf sdfsdf sfdsdf
              &lt;P /&gt;line 3
           &lt;/div&gt; 
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;   
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>&lt;style&gt;
  .grandparent {
      posttion: relative;
      height: 100%;
      width:100%;
      max-width:600px;
  
      margin: 0 auto;
      text-align:center;
      border: 1px solid green;
      overflow: hidden;
  }
  
  .parent {
      width: 75%;
      height: 75%;
      margin: auto;
      border: 1px solid blue;
      text-align: center;
      padding:20px;
      verflow:hidden;
  }
  .parent:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
  .child {
      posttion: relative;
      float:left;
      width: 30%;
      padding-bottom: 22%; 
      margin:1.66%;
      background-color: #1E1E1E;
      color: #ffffff;
  }
  
  .overlay {
      position:absolute;
      top:50%;
      left:50%;
      margin-left: -150px;
      margin-top:-100px;
      color: white; background: #666666; opacity: .8;
      z-index: 1000;
  }
  &lt;style&gt;
  </code></pre>
  
  <p>Here is the link to the example</p>
  
  <pre><code>http://jsfiddle.net/lb6688/aj7udvsq/3/
  </code></pre>
  
  <p>Again, appreciate your time!!! </p>