title: `margin:auto;` doesn't work on inline-block elements
body: <p>I have a &quot;container&quot; <code>div</code> to which I gave <code>margin:auto;</code>.</p>
  <p>It worked fine as long as I gave it a specific <code>width</code>, but now I changed it to <code>inline-block</code> and <code>margin:auto;</code> stopped working</p>
  <h2>Old code (works)</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
      border: 1px solid black;
      height: 200px;
      width: 200px;
  }
  .MtopBig {
      margin-top: 75px;
  }
  .center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="center MtopBig" id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <h2>New code (doesn't work)</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
      border: 1px solid black;
      display: inline-block;
      padding: 50px;
  }
  .MtopBig {
      margin: 75px auto;
      position: relative;
  }
  .center {
      text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="center MtopBig" id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://jsfiddle.net/mendelthecoder/NDwLB/1/" rel="noreferrer">DEMO fiddle</a>.</p>