title: Css div window in a div window's center
body: <p>I have a main div at the center of the screen at the shape of the touch pad.
  Within it I have another div in which I want to display output. However, the pad itself is set on % to react on different resolutions. </p>
  
  <p>See the pic below, yellow window is the whole pad and the red window is the content screen.</p>
  
  <p>Now I want to make that red window exactly as the pad's screen is set on % so it could adapt on different resolutions, is there a simple way of doing that?</p>
  
  <p><img src="https://i.stack.imgur.com/XefAf.png" alt="enter image description here"></p>
  
  <p>Yellow's css:</p>
  
  <pre><code>#mainWindow{
      margin-left:auto;
      margin-right:auto;
      background-image:url("../images/mainWindow.png");
      background-size:100% 100%;
      height:100%;
      width:80%;
      position: relative;
      border-style:solid;
      border-width:3px;
      border-color:yellow;
  }
  </code></pre>
  
  <p>The red one doesn't really have anything.</p>
  
  <p>I hope you understood me. Thanks beforehand.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>html code for the screens:</p>
  
  <pre><code>&lt;div id='mainWindow'&gt;
  
          &lt;div id='screen'&gt;
  
  
  
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>