Question

我正在尝试根据当前可查看的浏览器空间居中DIV（form），并考虑我滚动的页面向上或向下的距离。当我按下按钮时，我希望表单居中。我的尝试如下。我尝试的问题是，如果我向下滚动页面足够远，例如，表单没有输入，但如果我再次向上滚动页面，则会居中。

如果我向下滚动页面，并希望表单显示，则第一张图片会显示我得到的内容。

如果我位于页面顶部，则表单正确居中。

PS： - 没有 jQuery解决方案

div #docForm

的CSS

#docForm {
  font-family: sans-serif;
  border: 1px solid #ccc;
  width: 600px;
  padding: 10px;
  height: 425px;
  transform: translate3d(-50%, -50%, 0);
  z-index: 10000;
  position: absolute;
  background-color: white;
  top: 50%;
  bottom: 0;
  left: 50%;
  right: 0;
  border-radius: 10px;
  box-shadow: 3px 3px 3px #b8b8b8;
  color: #484848;
}

Answer 1

#docForm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

或者如果你想使用flex，用class formContainer创建一个div，把你的表单放在其中然后：

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

Answer 2

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

#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) */
}

此答案中省略了与解决方案无关的所有设置，但请注意，您不能设置right或bottom，否则会产生意外结果。

与使用flexbox或translate相比，这将与不支持CSS Level 3的浏览器兼容。

基于可查看的浏览器空间居中DIV

2 个答案: