Card with vertical aligned content, and animated states - css

Question

What is the best way to vertically align content within cards, whilst still allowing them to animate on hover, to show different screens?
For example if I have cards, each with a front which is shown and a back which is faded in on hover:
<div class="items">
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
</div>
Then using this css:
.item {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
background-color: tomato;
margin: 0 auto 1rem auto;
width: 200px;
position: relative;
}
.item .material-icons {
display: block;
}
.back,
.front {
opacity: 0;
position: absolute;
text-align: center;
width: 100%;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.front {
opacity: 1;
}
.item:hover .front {
opacity: 0;
}
.item:hover .back {
opacity: 1;
}
.material-icons {
font-size: 5em !important;
}
However after using position absolute, my vertical centering doesn't work, and i'm pretty sure this might not be the best approach!
You can see a half working version here:
http://jsfiddle.net/kmturley/8o29y7pd/26/
Thanks!

Answer 1

You can use transform to do the centering. It works great with absolute position elements. You won't need flexbox at all.
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
text-align: center;
http://jsfiddle.net/1354hzqb/

Answer 2

Just add a top position of 50% and transform: translate(0, -50%) to your .back, .front classes.
#import url('https://fonts.googleapis.com/css?family=Material+Icons');
.item {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px;
background-color: tomato;
margin: 0 auto 1rem auto;
width: 200px;
position: relative;
}
.item .material-icons {
display: block;
}
.back,
.front {
opacity: 0;
position: absolute;
text-align: center;
width: 100%;
top: 50%;
transform: translate(0, -50%);
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.front {
opacity: 1;
}
.item:hover .front {
opacity: 0;
}
.item:hover .back {
opacity: 1;
}
.material-icons {
font-size: 5em !important;
}
<div class="items">
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
</div>