title: CSS: Standard (dynamic) way to centralize an element in the y-axis
body: <p>my question is more or less self-explanatory, I am trying to find a standard dynamic way to centralize an element in the y-axis, much like the:</p>
  
  <pre><code>margin: auto;
  </code></pre>
  
  <p>For the x-axis. Any ideas?</p>
  
  <p>I am talking about the following piece of code, empty page, align one image in the center.</p>
  
  <pre><code>&lt;div id="main" style="display: block;"&gt; 
      &lt;img style="margin: auto; display: block;" 
      src="http://www.example.com/img.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help will be appreciated! :) </p>