html - How to vertically align image -

i attempting vertically align image in div, try won't work.

i attempting center in material design lite cell.

here code:

codepen

html:

<div class="mdl-grid">   <div class="mdl-cell mdl-cell--4-col">   a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>   </div>   <div class="mdl-cell mdl-cell--4-col">     <div class="imgholder">     <img src="http://i.stack.imgur.com/kq8ex.png" id="stackimg">     </div>   </div> </div> 

css:

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

vertical-align: middle isn't doing anything. neither top: 50%. image have parent div defined height, i'm not sure why it's not working.

any appreciated.

you can vertically center image using translatey(). give container position: relative; , assign position: absolute; along transform: translatey(-50%); image.

css

.imgholder{   width: 100%;   height: 100%;   position: relative; }  #stackimg{   width: 50%;   position: absolute;   right: 0;   top: 50%;   transform: translatey(-50%); } 

codepen