title: Using CSS to align control inside a div
body: <p>I want to center-align a GridView control in a <code>&lt;div&gt;</code>. But the GV seems to stay on top-left position of the div even after applying the methods below:</p>
  
  <p><code>text-align : center</code> and <code>vertical-align : middle</code> yields no results. </p>
  
  <p>Neither does <code>position : relative</code> or <code>margin : auto</code>.</p>
  
  <p><code>&lt;div align="center"&gt;</code> works for horizontal alignment, but can't find any form of <code>valign</code> for a <code>&lt;div&gt;</code>.</p>
  
  <p>Layout so far:</p>
  
  <pre><code>&lt;div id="content1" class="contentSingleCenter" &gt;
      &lt;asp:GridView ID="grdGrid" runat="server"&gt;&lt;/asp:GridView&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.contentSingleCenter
  {
      width : 80%;
      height : 200px;
      position: relative; 
      margin: auto;
  }
  </code></pre>
  
  <p>My main requirement is that I <strong>can't</strong> use a table to do this.</p>
  
  <p>Any ideas? TIA.</p>