css - 将表单更改为响应式并对其进行定位

Question

我是新来的所以提前道歉我希望不会违反任何规则。我希望在我的网页上的位置和域搜索表单方面得到一些帮助，如果可能的话，还有一种方法可以使其响应，因为目前如果页面太小并且距离更远，提交按钮将移动到文本条目下方如果页面太大，输入。我是 CSS 的新手(除了更改颜色等)，所以任何建议将不胜感激。

我目前使用以下方式定位表单:

.dm-reg {
  position: absolute;
  top: 55%;
  left: 20%;
  height: 100%;
  width: 65%;
  z-index: 10;

}

这样能保证屏幕尺寸不会影响窗体的位置吗？我使用了 jsfiddle 并改变了大小，它似乎保持不变，但如果可能的话，我希望它始终水平居中，所以不使用 left:20% 是否可能？

我已经设置了一个演示:http://jsfiddle.net/Dtorr1981/vp0zwxsu/

Answer 1

你想要这样的东西:

http://jsfiddle.net/vp0zwxsu/1/

诀窍是使用 100% 制作包装器 wrapper，然后使用 margin: auto;

将表单置于该包装器的中心

.dm-reg {
  position: absolute;
  top: 55%;
  height: 100%;
  width: 100%;
  z-index: 10;
}
form {
    width: 65%;
    margin: auto !important;
}

注意:我在表单边距中包含了 !important，因为它被那个 jsfiddle 中的 normalize.css 覆盖了，我想尽可能避免更改您的 HTML ;然而，更好的方法是给表单一个 ID 并在 CSS 中通过 ID 引用它。