How to vertically align image
<p>I am attempting to vertically align an image in a div, but everything I try won't work.</p>

<p>I am attempting to center it in a <a href="https://getmdl.io/" rel="nofollow">material design lite</a> cell.</p>

<p>Here is my code:</p>

<p><strong><a href="http://codepen.io/shaansheikh/pen/XKyVgP" rel="nofollow">CodePen</a></strong></p>

<p><strong>HTML</strong>:</p>

<pre><code>&lt;div class="mdl-grid"&gt;
  &lt;div class="mdl-cell mdl-cell--4-col"&gt;
  a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;a&lt;br&gt;
  &lt;/div&gt;
  &lt;div class="mdl-cell mdl-cell--4-col"&gt;
    &lt;div class="imgholder"&gt;
    &lt;img src="http://i.stack.imgur.com/kq8EX.png" id="stackimg"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong>:</p>

<pre><code>.mdl-cell{
  border: 1px solid black;
}
.imgholder{
  width: 100%;
  height:100%;
}
#stackimg{
  width:50%;
  float: right;
  position: reletive;
  top:50%;
  vertical-align: middle;
}
</code></pre>

<p><code>Vertical-align: middle</code> isn't doing anything. Neither is <code>top: 50%</code>. The image does have a parent div with a defined height, so I'm not sure why it's not working.</p>

<p>Any help is appreciated.</p>