Вертикально и горизонтально выровнять по центру текст

Question

У меня на моем сайте 2 блока.

Я хотел бы вертикально и горизонтально выровнять текст по центру в обеих областях. Сейчас он сидит ниже :(

Вот мой текущий код:.

https://jsfiddle.net/byp0pevr/

.text-block div { 
 
    width: 100%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    line-height: 1; 
 
    position: relative; 
 
    color: black; 
 
    z-index: 5; 
 
} 
 

 
#adbox1 { 
 
    width: 300px; 
 
    height: 620px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 10px; 
 
} 
 

 
#adbox2 { 
 
    width: 300px; 
 
    height: 300px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 320px; 
 
} 
 

 
.image-holder { 
 
    display:inline-block; 
 
    position: relative; 
 
} 
 
.image-holder:after { 
 
    content:''; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    background: black; 
 
    opacity: 0; 
 
} 
 
.image-holder:hover:after { 
 
    opacity: 0.1; 
 
}

<div id="adbox1" class="image-holder"> 
 
    <img src="http://placehold.it/300x620" title="1"> 
 
    <div class="text-block"> 
 
    <div>Some<br>Text</div> 
 
    </div> 
 
</div> 
 

 
<div id="adbox2" class="image-holder"> 
 
    <img src="http://placehold.it/300x300" title="1"> 
 
    <div class="text-block"> 
 
    <div>Some<br>Text</div> 
 
    </div> 
 
</div>

Answer 1

Дайте position: relative; к #adbox1 и дать следующий CSS

.text-block { 
    left: 50%; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

Working Fiddle