CSS设置div垂直横向居中

问题

最近写公司登陆页面，打算设置登录框水平竖直均居中，尝试了各种方式，最终解决方式如下

解决

父级div：

1
2
3
4
5
.login-div{
	width: 100%,
	height: 100%,
	overflow: hidden
}


子级登录框：

1
2
3
4
5
6
7
8
.login-box{
	// 以左上角为原点,不处以中心位置
	top: 50%,
	left: 50%,
	// 往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置
	transform: translate(-50%,-50%)
	position: absolute
}