title: Why don't margin-top: auto and margin-bottom:auto work the same as their left and right counterparts?
body: <p>If I set the CSS margin properties of a div like so:</p>
  
  <pre><code>div { margin-left: auto; margin-right: auto; }
  </code></pre>
  
  <p>I get a div which is centered horizontally in the page, <a href="http://jsfiddle.net/T8Hnb/" rel="noreferrer">like so</a>.</p>
  
  <p>However, if I change the CSS to this:</p>
  
  <pre><code>div { margin-top: auto; margin-bottom: auto; }
  </code></pre>
  
  <p>my div is not vertically centered. I don't need to know a workaround (<a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html" rel="noreferrer">plenty of solutions</a> <a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html" rel="noreferrer">are available</a>) but I would like to know the reason for this behaviour. Why don't margin-top and margin-bottom work in the same way? What am I missing?</p>