Vertical align multiple elements in footer with variable height - html

Question

I have a footer which has a variable height. The largest element is an image which is automatically centered via the padding of the footer. Next to the image there is a little navigation and a copyright statement below. To the far right there is a button to go back to top.
I've included a fiddle where I got all the elements vertically centered but I got the result by adding the height on some elements. Now my question is if there is a way to achieve this result but without adding the height of the biggest element?
My fiddle
.footer {
background: darkgray;
}
.wrap {
position: relative;
width: 960px;
margin: 0 auto;
padding: 30px 0;
}
.wrap:after {
content: "";
display: table;
clear: both;
}
.left {
width: 29%;
float: left;
}
.left img {
height: 160px;
}
.center {
text-align: center;
float: left;
width: 50%;
height: 160px;
}
.center-wrap {
display: inline-block;
vertical-align: middle;
}
.center:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.right {
position: relative;
float: left;
width: 20%;
height: 160px;
}
.right a {
position: absolute;
right: 0;
top: 50%;
margin-top: -25px;
}
/* Styles */
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
margin-left: 20px
}
nav ul li:first-child {
margin-left: 0;
}
.right a {
display: block;
width: 50px;
height: 50px;
background: black;
}
<div class="footer">
<div class="wrap">
<div class="left">
<img src="http://placehold.it/500x500" alt="" />
</div>
<div class="center">
<div class="center-wrap">
<nav>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</nav>
<p>© 2015 copyright COMPANY NAME // All Rights Reserved</p>
</div>
</div>
<div class="right">
top
</div>
</div>
</div>

Answer 1

You can vertically align anything with just 3 lines of CSS.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Go nuts.
Don't forget vendor prefixes.