将表单更改为响应并定位

Question

我是新来的，所以提前道歉我希望不会破坏任何规则。我希望在我的网页上提供一些关于位置和域搜索表单的帮助，以及一种方法，如果可能的话，它会响应，如果页面太小并且距离更远，则提交按钮将移动到文本条目下方如果页面太大，则输入。我是css的新手（除了改变颜色等）所以任何建议都会受到最高的赞赏。

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

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

}

这会确保屏幕尺寸不会影响表单的位置吗？我已经使用了jsfiddle和改变了尺寸，它似乎保持不变，但是如果ppossible我希望它始终水平居中，所以不使用左：20％是可能的吗？

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

Answer 1

你想要这样的东西：

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

诀窍是使用100％制作包装器包装器，然后使用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引用它。