title: Vertically center image in column
body: <p>I have two columns in my HTML page. </p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;div id="left"&gt;&lt;/div&gt;
    &lt;div id="right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each of them occupies half of the page</p>
  
  <pre><code>#left {
      float: left;
      width: 50%;
  }
  
  #right {
      float: left;
      width: 50%;
  }
  </code></pre>
  
  <p>I want to center a picture in the right column. I know that I can make it horizontally centered by doing <code>margin-left: auto; margin-right: auto;</code>. How can I make it vertically centered?</p>