Vertical align multiple elements in footer with variable height

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>&copy; 2015 copyright COMPANY NAME // All Rights Reserved</p>
          </div>
        </div>
    
        <div class="right">
          <a href="">top</a>
        </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.