html - 如何根据窗口的高度制作垂直响应元素？

我在网站的中心（想象为Google）设置了高度和宽度的输入，并且需要根据浏览器窗口的高度对其位置进行垂直响应。我一直在寻找解决方案，但找不到。

input {
  max-height:4em;
  max-width: 25em;
  outline: none;
}

最佳答案

一种方法是像这样使用CSS3 translateY。

input {
  max-height:4em;
  max-width: 25em;
  margin:0 auto;
  position: relative;
  top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

http://codeply.com/go/94MsX6EnaO