html中的form表单在页面中水平和垂直居中

form表单想要在页面中水平垂直居中，并且不会受页面缩小和放大的影响

1.form表单外层嵌套一个div;
2.给div设置固定定位，宽高为100%
3.给form表单设置绝对定位，左右为0，距离上部30%，外边距0，auto。
.div{
position: fixed;
width: 100%;
height: 100%;
background-color:#AEDDFF;
}
.login{
position: absolute;
top: 30%;
left: 0;
right: 0;
margin: 0 auto;
border: 1px solid blue ;
width: 223px;
padding: 5px;
}