html - 垂直对齐页脚中可变高度的多个元素

Question

我有一个高度可变的页脚。最大的元素是一个图像，它通过页脚的填充自动居中。图片旁边有一个小导航和下面的版权声明。最右边有一个返回顶部的按钮。

我已经包含了一个 fiddle ，其中我将所有元素垂直居中，但我通过在某些元素上添加高度来获得结果。现在我的问题是，是否有一种方法可以在不增加最大元素高度的情况下实现这个结果？

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

只需 3 行 CSS，您就可以垂直对齐任何内容。

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

疯狂吧。

不要忘记供应商前缀。