title: How can I both horizontally and vertically center two divs inside another div?
body: <p><br />
  What I am trying to do should look like this:
  <br />
  <img src="https://i.stack.imgur.com/eD6lE.jpg" alt="horizontally/vertically aligned inner divs">
  <br />
  ...but my <code>inner_top</code> div (with the <em>red</em> background) is <em>not</em> <strong>horizontally-centered</strong>, and ends up looking like this:
  <br />
  <img src="https://i.stack.imgur.com/cNuxY.jpg" alt="all jacked up!">
  <br /><br />
  The conflict appears to be using <code>display: inline-block'</code> on the <code>inner_top</code> div, which is what appears to make it <strong>vertically-centered</strong> though, except for a weird spacing between the two divs.
  <br /><hr />
  Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;
              CSS sucks!!!
          &lt;/title&gt;
  
          &lt;style type = "text/css"&gt;
  
              #outer {
                  width: 250px;
                  height: 500px;
                  border: 5px solid black;
  
                  /* for vertically-centering inner divs: */
                  display: table-cell;
                  vertical-align: middle;
              }
                      #inner_top {
                          width: 75px;
                          height: 175px;
                          background-color: red;
  
                          /* horizontally-centered: */
                          margin: 0 auto;
  
                          /* vertically-center both this and the bottom div:
                          (but now horizontal-alignment doesn't work on this div!) */
                          display: inline-block;
  
                      }
                      #inner_bottom {
                          width: 150px;
                          height: 150px;
                          background-color: blue;
  
                          /* horizontally-centered: */
                          margin: 0 auto;
                      }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id = "outer"&gt;
  
              &lt;div id = "inner_top"&gt;
              &lt;/div&gt; &lt;!-- end of inner top --&gt;
  
              &lt;div id = "inner_bottom"&gt;
              &lt;/div&gt; &lt;!-- end of inner_bottom --&gt;
          &lt;/div&gt; &lt;!-- end of outer div --&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>