Vertical align middle text without lineheight and table-cell - css

Question

I have a Teaser with a "toggle"-Animation, as can be seen on JSFiddle or below:
.ax {
height:60px;
width:150px;
background:gold;
}
.caption {
position: absolute;
left:0;
top: 35%;
overflow: hidden;
right: 0;
background-color: rgba(24,88,140,0.7);
width: 100%;
height: 52px;
z-index: 2;
-o-transition: 500ms;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-ms-transition: 500ms;
transition: 500ms;
font-weight: lighter;
padding: 10px;
color: #fff;
}
a.link{
color: #fff;
overflow: hidden;
width: 80%;
margin-bottom: 30px;
font-weight: lighter;
font-size: 16px;
line-height: 22px;
}
.caption:hover {
height: 100%;
top: 0;
}
.box {
position:relative;
width:250px;
height:200px;
}
/*TABLE CELL METHOD*/
.caption2 {
position: absolute;
left:0;
top: 35%;
overflow: hidden;
right: 0;
background-color: rgba(24,88,140,0.7);
width: 100%;
height: 52px;
z-index: 2;
-o-transition: 500ms;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-ms-transition: 500ms;
transition: 500ms;
font-weight: lighter;
padding: 10px;
color: #fff;
display:table;
}
.caption2:hover {
height: 100%;
top: 0;
}
a.link2{
display:table-cell;
vertical-align: middle;
overflow: hidden;
width: 80%;
margin-bottom: 30px;
font-weight: lighter;
font-size: 16px;
line-height: 22px;
}
<div class="box">
<div class="caption">
Lorem Ipsum blabla bla blahah ipsum lorem blablablahh
<p class="captiontext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><br><br
<br><br>
table cell method (div.caption2 display:table and a.link display:table-cell + vertical-algin:middle)
<br><br>
<div class="box">
<div class="caption2">
<a class="link2" href="#">Lorem Ipsum blabla bla blahah ipsum lorem blablablahh</a>
<p class="captiontext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
I want to align the link in the vertical center of the blue box. The link can be a single line or two lines (at most), but it should always be centered vertically.
The CSS property lineheight doesn't work with two line links, whereas the table(-cell)-method also doesn't work (see above).
Is there any way to center both one and two line links in my box?

Answer 1

The display type "Flexbox" may be useful for this. Apply this CSS to the parent of the child you want centered:
display: flex;
flex-direction: column;
justify-content: center;

Answer 2

To verticly center any element, you can apply this style:
.element
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
You will have to replace your table cells with columns in order to replicate your current styles. Credit to Sebastian Ekstrom for the solution.

Answer 3

Another way is vertical-align on pseudoelement:
https://codepen.io/darxide/pen/xRmYdQ
<div class="block" style="height: 300px;">
<div class="centered">
vertical center
</div>
</div>
.block:before {
content: ' ';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
display: inline-block;
vertical-align: middle;
}