首先设置一个父元素（.parent）和一个子元素（.child）的样式。
【这里的width和height的值是一样的】
CSS代码：
.parent {position: relative;width: 200px;height: 200px;background-color: #eee;}.child {width: 70px;height: 70px;position: absolute;background-color: red;}
HTML代码：
<div class="parent"><div class="child"></div></div>
页面：
如果我们直接给子元素（.child）设置top:50%
页面：
JavaScript验证一下确实距离顶部的距离为100px
只要使得垂直居中线能从中间平分掉.child，就能让.child垂直居中于.parent。
此时，.child的顶部与.parent的垂直居中线重合，也就说只要让.child能够上移其本身width一半的就可以了。
上移距离= width * 0.5= 70 * 0.5 = 35px
margin-top是正时，外边距向上扩张，子元素下移；margin-top是负时，外边距向下缩减，子元素上移。所以要设置成-35px。
.child {width: 70px;height: 70px;position: absolute;background-color: red;top: 50%;margin-top: -35px; /*新加样式*/}
页面：
