Как вертикально выравнивать изображение

Question

Я пытаюсь вертикально выровнять изображение в div, но все, что я пытаюсь, не будет работать.

Я пытаюсь центрировать его в ячейке material design lite.

Вот мой код:

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 не делает ничего. Также нет top: 50%. У изображения есть родительский div с определенной высотой, поэтому я не уверен, почему он не работает.

Любая помощь приветствуется.

Answer 1

Вы можете вертикально центрировать изображение с помощью translateY(). Дайте вашему контейнеру position: relative;, а затем присвойте position: absolute; вместе с transform: translateY(-50%); на ваше изображение.

CSS

.imgholder{ 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

#stackimg{ 
    width: 50%; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
} 

CodePen

Answer 2

Вертикальный выровнять DIV, содержащий изображение вместо самого IMG тег, или проверить это:

> `http://jsfiddle.net/kizu/4RPFa/4570/`