title: Vertically centering a div inside another div
body: <p>I want to center a div which is inside another div.</p>
  <pre><code>&lt;div id=&quot;outerDiv&quot;&gt;
      &lt;div id=&quot;innerDiv&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is the CSS I am currently using.</p>
  <pre><code>    #outerDiv {
          width: 500px;
          height: 500px;
          position: relative;
      }
      
      #innerDiv {
          width: 284px;
          height: 290px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -147px;
          margin-left: -144px;
      }
  </code></pre>
  <p>As you can see, the approach I use now depends on the width and height of <code>#innerDiv</code>. If the width/height changes, I will have to modify the <code>margin-top</code> and <code>margin-left</code> values. Is there any generic solution that I can use to center the <code>#innerDiv</code> independently of its size?</p>
  <p>I figured out that using <code>margin: auto</code> can horizontally align the <code>#innerDiv</code> to the middle. But what about vertical alignment?</p>