Html 当div水平和垂直居中时，放大后，div顶部不可见

在我的页面上，有一个居中的div，其中包含一个表单。div位于屏幕中央。放大后，div的顶部不可见，为什么？我该如何解决这个问题？它也忽略了保证金

你可以在测试网站上实时查看

谢谢

编辑：这里是代码片段，这样您就不必打开JSFIDLE了

$（“body”）.removeAttr（'class'）；
变量寄存器=$（“#寄存器链接”）；
变量按钮=$（“按钮”）；
注册。单击（函数（）{
$（“#nick”）.stop（true，false）.slideToggle（{duration:350，queue:false}）；
$（“#密码重复”）.stop（true，false）.slideToggle（{duration:350，queue:false}）；
html（button.html（）='Prihlásiťsa'？“Registrovaťsa”：“Prihlásiťsa”）；
register.text（register.text（）；
});
/*概述*/
.preload*{-webkit转换：无！重要；-moz转换：无！重要；-ms转换：无！重要；-o转换：无！重要；转换：无！重要}
html{-webkit框大小：边框框；框大小：边框框；}
*，*：之前，*：之后{-webkit框大小：继承；框大小：继承；}
a{
颜色：白色；
}
a:主动的{
颜色：红色；
}
html{
身高：100%；
}
身体{
字体系列：“开放式Sans”，无衬线；
背景：-webkit渐变（线性、左上、右上、从（#6a11cb）到（#2575fc））；
背景：线性梯度（向右，#6a11cb 0%，#2575fc 100%）；
字号：1em；
身高：继承；
}
h1{
文本对齐：居中；
垂直对齐：顶部；
边缘底部：.9em；
字体系列：Pacifico；
字号：5em；
背景：-webkit渐变（线性、左上、右下、从（#d93589）到（#c72b5a））；
背景：线性渐变（右下角，#d93589，#c72b5a）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
边际上限：0；
游标：默认值；
}
形式{
最大宽度：19.750em；
边距：0.1米0.1米；
文本对齐：居中；
}
表单输入{
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.8）；
边界：无；
填充：1em；
边缘底部：1米；
颜色：白色；
边界半径：0.313em；
大纲：无；
-webkit过渡：背景0.5s；
过渡：背景0.5s；
}
表格输入：焦点{
背景：rgba（0,0,0,1）；
}
表单输入：最后一个子项{
页边距底部：0；
}
钮扣{
边缘顶部：1米；
背景：-webkit渐变（线性、左上、右上、从（#ec008c）到（#fc6767））；
背景：线性梯度（向右，#ec008c，#fc6767）；
背景大小：200%；
背景位置：左；
文本转换：大写；
字号：600；
颜色：#fff；
边界半径：2.063em；
填充物：1.250em 2.500em；
最大宽度：100%；
边界：无；
大纲：无；
光标：指针；
显示：块；
保证金：1em自动；
}
形成小规模{
显示：块；
颜色：黑色；
}
.弹出窗口{
背景：白色；
边界半径：.5em；
填充：3.5%；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

洛雷姆。
普里拉西萨

您可以使用媒体查询进行上述调整。我希望这对你有帮助

您可以使用媒体查询进行上述调整。我希望这对你有帮助
 您错误地使用了绝对位置使用这种方式：

.popup {
    background: white;
    margin: auto;
    width: 90%;
}

之后，您必须更改输入样式。使用媒体查询进行良好的设计。
我建议您使用响应性框架，例如

您也可以使用此选项：

<div class="vam-container">
  <div class="vam-item">
  </div>
</div>

/*Should not use with clearfix*/
.vam-container:before {
    content: "";
    height: 100%;
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}

/*Should not set width property 100% or full width*/
.vam-item {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}


/*不应与clearfix一起使用*/
.vam容器：之前{
内容：“；
身高：100%；
显示：内联块；
*显示：内联；
缩放：1；
垂直对齐：中间对齐；
}
/*不应将宽度属性设置为100%或全宽*/
.vam项目{
显示：内联块；
*显示：内联；
缩放：1；
垂直对齐：中间对齐；
}
您错误地使用了绝对位置，请使用以下方式：

.popup {
    background: white;
    margin: auto;
    width: 90%;
}

之后，您必须更改输入样式。使用媒体查询进行良好的设计。
我建议您使用响应性框架，例如

您也可以使用此选项：

<div class="vam-container">
  <div class="vam-item">
  </div>
</div>

/*Should not use with clearfix*/
.vam-container:before {
    content: "";
    height: 100%;
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}

/*Should not set width property 100% or full width*/
.vam-item {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}


/*不应与clearfix一起使用*/
.vam容器：之前{
内容：“；
身高：100%；
显示：内联块；
*显示：内联；
缩放：1；
垂直对齐：中间对齐；
}
/*不应将宽度属性设置为100%或全宽*/
.vam项目{
显示：内联块；
*显示：内联；
缩放：1；
垂直对齐：中间对齐；
}
将
最大高度：100vh
设置为
弹出窗口
类


html{
-webkit框大小：边框框；
框大小：边框框；
}
*,
*：之前，
*：之后{
-webkit框大小：继承；
框大小：继承；
}
a{
颜色：白色；
}
a:主动的{
颜色：红色；
}
html{
身高：100%；
}
身体{
字体系列：“开放式Sans”，无衬线；
背景：-webkit渐变（线性、左上、右上、从（#6a11cb）到（#2575fc））；
背景：线性梯度（向右，#6a11cb 0%，#2575fc 100%）；
字号：1em；
身高：继承；
}
h1{
文本对齐：居中；
垂直对齐：顶部；
边缘底部：.9em；
字体系列：Pacifico；
字号：5em；
背景：-webkit渐变（线性、左上、右下、从（#d93589）到（#c72b5a））；
背景：线性渐变（右下角，#d93589，#c72b5a）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
边际上限：0；
游标：默认值；
}
形式{
最大宽度：19.750em；
边距：0.1米0.1米；
文本对齐：居中；
.popup{
  background: white;
  border-radius: .5em;
  padding: 10%;
}

body{
  font-family: 'Open Sans', sans-serif;
  background: -webkit-gradient(linear, left top, right top, from(#6a11cb), to(#2575fc));
  background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  font-size: 1em;
  display: table;
  margin: 0 auto;
}

#center{
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}