Question

我正在尝试将包含表格的表单放置在叠加的中心，其位置固定在css中。

我还希望它在页面调整大小或用户滚动时保持在中心位置 - 随页面移动。

这就是我所拥有的：

<div id="overlay">
    <form class="overlay-form" method='POST' id="form"...>
        <table id="form" class="overlay-table">
        ...
        </table>
    </form>
</div>

和css：

#overlay {
     position: fixed;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     /*there is also a centered background image*/
}
#overlay div {
     width:800px;
     text-align:center;
}
form.overlay-form {
     width:780px;
}
table.overlay-table {
    position: relative;
}

Answer 1

如果您的项目未涵盖旧浏览器，则可以使用 Flexbox model 以及一些相对维度指标，例如vw和vh。有关vw / vh here.

的更多信息

注意：有关我正在使用的flexbox属性的更多信息，请点击上面的链接。

意思是，你应该尝试以下的flexbox方法，它将为你集中所有内容：

#overlay {
   position: fixed;
   left: 0;
   top: 0;
   left: 0;
   bottom: 0;
   width: 100vw;
   height: 100vh;
   text-align:center;
   /*Flexbox*/
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: center;
}

您应该使用 Autoprefixer 来完成所有现代浏览器的工作。

位置形式在固定叠加的中心

1 个答案: