title: center div on the page with the width and height as a percentage and proportions
body: <p>I need to center a div on the page with the following characteristics:</p>
  
  <ul>
  <li>the width page is 80%</li>
  <li>width and height as a percentage (eg width: 100%; height: 60%)</li>
  <li>set a minimum and maximum width and height (eg min-width:980px; min-height:588px and max-width:1170px; max-height:702px)</li>
  <li>if I resize the page the div is resized proportionally to the page both vertically and horizontally (if I resize the page vertically only you have to resize the window horizontally also)</li>
  </ul>
  
  <p>can you help?
  Thank you.</p>
  
  <p>----HTML</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="box"&gt;
          text
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>----CSS</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
      #content {
          width:80%;
          background:#000;
          margin:0 auto;
      }
      #box{
          width:100%;
          height:60%;
          background:red;
          min-width:980px;
          min-height:588px;
          max-width:1170px;
          max-height:702px;
      }
  &lt;/style&gt;
  </code></pre>