绝对定位display:absolute如何实现垂直居中？

首先设置一个父元素（.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; /*新加样式*/
}

页面：