CSS让元素垂直居中

问题：

布局如下

<div class="head" style="background-color: chartreuse"> //大的div <div class="logo" style="background-color: darkblue"> //小的div <a href="http://www.baidu.com"> <img src="img/logo_h.png" /> </a> </div> </div>

这里需要的是小的垂直居中在大的div里面

解决办法：

.head { height: 70px; background: #ffffff; width: 300px; position: relative; } .head .logo { position: absolute; top: 50%; transform: translateY(-50%); width: 133px; }

我们这边用平移的方法去解决这个问题

首先设置top为父idv的一般

再向上平移 自身的一半

数学解答式如下：