title: Centering a div vertically using jquery
body: <p>I know a lot of techniques out there for centering a div vertically, but I made this according to my thinking.  I believe the concept is correct, but I'm not getting 100% results. </p>
  
  <p>Here is the javascript</p>
  
  <pre><code>jQuery(document).ready(function(){
    var l=jQuery('.div1').height();
    var level=l/2;
    var bt=jQuery('.div2').height()/2;
    var val=level-bt;
    jQuery('.div2').css("margin-top",val);
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.div1
  {
    height:50px;
    background-color: red;
    position:relative;    
  }
  .div2
  {
      border: 1px solid;
      background-color: orchid;
      text-decoration: none;
      letter-spacing: 1px;
      text-transform:uppercase;
      padding: 5px;
      position: absolute;
      right:5%;
      top:0%
  
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="div1"&gt;&lt;div class="div2"&gt;vertical&lt;/div&gt;
  </code></pre>
  
  <ol>
  <li>I calculated the outer div height and calculating the center by dividing it by 2.</li>
  <li>Calculating the div center which should be centered, Here it is <code>div2</code></li>
  <li>Now I reduce the half of the <code>div2</code> height with half of <code>div1</code> height by the result, if I give that as a margin-top, I should be able to get it to center vertically. Am I right? if not could some one explain to me?</li>
  </ol>
  
  <p>Check the <a href="http://jsfiddle.net/DZxW2/" rel="nofollow">fiddle</a></p>