Javascript 基于可视浏览器空间将DIV居中

我正试图根据当前可查看的浏览器空间将一个DIV（

表单

）居中放置，并考虑到我已向上或向下滚动页面的距离。当我按下按钮时，我希望表格居中。我的尝试如下。我尝试的问题是，如果我向下滚动一页足够远，例如，表单不会被输入，但如果我再次向上滚动页面，表单会居中

如果我已向下滚动页面，并希望表单出现，则第一个图像将显示我得到的内容

如果我在页面的顶部，那么表单正确居中

PS:-请不要使用jQuery解决方案

用于div的CSS

#docForm

#docForm{
字体系列：无衬线；
边框：1px实心#ccc；
宽度：600px；
填充：10px；
高度：425px；
转换：translate3d（-50%，-50%，0）；
z指数：10000；
位置：绝对位置；
背景色：白色；
最高：50%；
底部：0；
左：50%；
右：0；
边界半径：10px；
盒影：3px 3px 3px#b8b8；
颜色：#4848；
}

或者，如果要使用flex，请使用类formContainer创建一个div，将表单放入其中，然后：

.formContainer {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

---

由于您有固定的宽度和高度，因此可以通过将左侧和顶部设置为屏幕中心，然后将容器偏移其宽度和高度的一半来完成此操作：

#docForm {
  width: 600px;
  height: 425px;
  border: 1px solid #ccc;
  padding: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -311px  /*  -(width + padding*2 + border_width*2) / 2)  */
  margin-top: -223px   /*  -(height + padding*2 + border_width*2) / 2) */
}

与此答案中省略的解决方案无关的所有设置，但是请注意，您不能将

设置为右
或
下
，否则将得到意外结果

与使用or相比，这将与不支持CSS级别3的浏览器兼容。
能否向我们展示使用代码片段的含义？这是非常模糊的。如果您将它包装在一个100%宽和高的
位置：fixed
元素中，它应该可以。位置固定元素不滚动。请不要在标题中添加诸如“no jquery solutions Please”之类的注释-如果有的话，这应该包含在问题的描述中（但不使用jquery标记在理论上也足够了）。这正是我想要的。
#docForm {
  width: 600px;
  height: 425px;
  border: 1px solid #ccc;
  padding: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -311px  /*  -(width + padding*2 + border_width*2) / 2)  */
  margin-top: -223px   /*  -(height + padding*2 + border_width*2) / 2) */
}