title: Centering form into a div block
body: <p>The following form and css stylesheet are given:</p>
  
  <p><code>index.html</code> snippet</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child"&gt;
          &lt;form&gt;
              &lt;input type="text"/&gt;
              &lt;br/&gt;
              &lt;input type="submit"/&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="helper"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>mycss.css</code> snippet</p>
  
  <pre><code>.parent{
      width: 500px;
      height: 400px;
      text-align: center;
      border: 1px solid #dd0;
      background: #ffa;
  }
  .child {
      display:inline-block;
      vertical-align:middle;
  }
  .helper {
      display:inline-block;
      vertical-align:middle;
      height:100%;
      width:0px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/bundos/em7kf/" rel="nofollow">There is result</a> of code above. But this result isn't clear for me. What is the role of <code>div.helper</code> in this example? </p>
  
  <p>In the <code>div.parent</code> style class we have <code>text-align: center;</code>. Why without it we have only horizontal centering?</p>
  
  <p>Why without <code>vertical-align:middle;</code> in the <code>div.child</code> or <code>div.helper</code> we have only horizontal centering?</p>