transform的translate属性

今天在练习做登录表单的时候，发现了一个问题，放上表单后，父盒子上边距发生了塌陷。代码如下：

.bg-img {
	position: relative;
	height: 100vh;
	background: url(bgimg.jpg);
	background-size: cover;
	background-position: center;
}
.bg-img::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.7);
}
.login-box {
	margin: 300px auto;
	width: 300px;
	background-color: rgba(0,0,0,.3);
	padding: 40px 25px;
	box-shadow: 0 5px 5px 5px rgba(255,255,255,.3);
}

当然解决方法很多，一般给父盒子加个上边框可以解决，例如：

.bg-img {
	position: relative;
	height: 100vh;
	background: url(bgimg.jpg);
	background-size: cover;
	background-position: center;
	border-top: 1px solid transparent;
}

不过今天学习了一种新的方法，当定位login-box(子盒子)时，不设置上边距，用绝对定位，向下向右移动50%，在回减盒子宽度高度的50%，像这样：

.login-box {
	position: absolute;
	top: 50%;
	left: 50%;
	margin