title: Image not vertically centred despite using table and table-cell
body: <p>I've tried to use <code>display: table</code> in the parent div and <code>display: table-cell</code> in the child div as seen <a href="http://jsfiddle.net/ENGQG/" rel="nofollow">here</a> but I can't seem to get the image vertically aligned. What am I doing wrong?</p>
  
  <p>Here is my code: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="body_splash"&gt;
  &lt;img src="https://upload.wikimedia.org/wikipedia/
  commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/&gt; 
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.body_splash {
      width: 378px;
      float: left;
      display:table;
      height: 400px;
      background-color: #eaeaea;
  }
  .body_splash img {
      display: table-cell;
      vertical-align: middle;
  }​
  </code></pre>
  
  <p>Thanks in advance.</p>