title: How to put a <div> inside another <div> in the middle (vertically)  when using absolute position?
body: <p>I'm an inexperienced HTML learner, so please bear with me.</p>
  
  <p>I'm trying to make a <code>&lt;div&gt;</code> (#banner) stay in the center of the browser even if resized; so I figured I would need another <code>&lt;div&gt;</code> as the #container of the entire browser.</p>
  
  <p><code>#banner</code> needs to extend its width 100% so I had to use the absolute position.</p>
  
  <p>Even though I have already looked at several other posts here in stackoverflow - I can't figure how to implement their solutions to my particular case.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div&gt;
     &lt;div id="banner"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container{
  
  }
  #banner{
      background-color: #e51400;
      height: 400px;
      position: absolute;
      left: 0px;
      right: 0px;
      font-weight: bold;
      text-align: center;
      vertical-align:middle;
  }
  </code></pre>
  
  <p>This is basically what I'm trying to accomplish
  <img src="https://i.stack.imgur.com/2i0Ib.jpg" alt="enter image description here"></p>
  
  <p>Do I really need another <code>&lt;div&gt;</code> besides #banner in order to put it in the center ?</p>