CSS - blocks with nicely aligned text

Insipred by: http://codepen.io/sebastianekstrom/pen/kzEhe http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

by katalin_2003

HTML

<!-- ELEMENT 1 -->
<div class="parent-element">
    <p class="element-title">TITLE</p>
    <p class="element1">I'm a block of text! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quia doloremque tempora placeat officia ex obcaecati tenetur deserunt repudiandae praesentium.</p>
</div>
<!-- ELEMENT 2 -->
<div class="parent-element" style="background-color: yellow;">
    <p class="element2">I'm a block of text! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quia doloremque tempora placeat officia ex obcaecati tenetur deserunt repudiandae praesentium.</p>
</div>
<!-- ELEMENT 3 -->
<div class="parent-element" style="background-color: green; text-align: center;">
    <img src="http://placehold.it/70x70" class="image" />
</div>

CSS

body {
    font-family: sans-serif;
    background-color: #59488b;
    -webkit-font-smoothing: antialiased;
}
.parent-element {
    height: 200px;
    width: calc(100%/3.2);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background-color: tomato;
    float: left;
    margin-left: 1em;
    border-radius: 0.2em;
}
.element-title {
    text-align: center;
    background-color: #333;
    color: #FFFFFF;
    margin: 0;
    padding: 5px 0;
    border-top-right-radius: 0.2em;
    border-top-left-radius: 0.2em;
}
.element1 {
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-90%);
    padding: 1em 0;
}
.element2 {
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 1em 0;
}
.image {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}