在缩略图的中间垂直对齐文本

Question

I have a few thumbnail images that on hover have a multi colored hover styling (looks like this, the yellow thumbnail is what it looks like when you hover over it)

The only problem is that I can't get the text inside to align vertically in the middle of the thumbnail without breaking something else. When I change .thumb to display: table; and .align-mid to display: table-cell; with vertical-align: middle; the text aligns to the middle but the background color becomes opaque. Looks like this:

I can't seem to figure out how to accomplish this.

HTML:

<div class="thumb" onclick="location.href='{{ cms:page:thumb_one.link:string }}'">
    {{ cms:page_file:thumb_one.image:image}}
    <div class="align-mid">
        {{ cms:page:thumb_one.text:string }}<br>
        {{ cms:page:thumb_one.description:string }}
    </div>
    <div class="yellow">
    </div>
</div>

CSS:

.thumb {
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   display:inline-block;
   position: relative;
   height: 170px;
   width: 235px;
   overflow: hidden;
}
.thumb:after {
   background: rgba(255,255,255,.7);
   content:'';
   display: block;
   height: 170px;
   left: 0;
   opacity: 0;
   padding: 20px;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 1;
}

.thumb:hover:after {
   opacity: 1;
   padding: 20px;
   transition: opacity .4s;
}

.thumb:hover > .align-mid {
   background-color: transparent;
   color: white;
}

.thumb:hover {
   cursor: pointer;
}

.thumb img {
     height: 100%;
     width: 100%;
}   

.yellow {
     opacity: 0;
}  

.thumb:hover .yellow {
   background: rgba(255,213,43,.8);
   content:'';
   display: block;
   left: 13px;
   right: 13px;
   bottom: 13px;
   top: 13px;
   opacity: 1;
   position: absolute;
   transition: opacity .4s;
   z-index: 2;
}

.align-mid {
   background-color: rgba(0,0,0,.5);
   color: rgb(255,213,43);
   height: auto;
   padding-top: 10px;
   padding-bottom: 10px;
   position: relative;
   top: -105px;
   width: 100%;
   z-index: 3;
}

Answer 1

It is obvious that when your wrapper have more than a child , and all children are viewed as table cells , in case you dont want them stacked vertically ( y-axis) , you have to assign absolute positioning to each , this way they gonna be stacked on top of each other ( z-axis)

so a simple solution will be:

.thumb img { height: 100%; width: 100%; position:absolute; }