垂直对齐文本输入（动态高度）

Question

我创建了一个动态高度输入，如下所示，在浏览器调整大小时进行缩放。我想要实现的第二步是垂直居中输入文本。我使用vertical-align: middle，但似乎没有任何变化。

如何垂直对齐输入文字

input{
  background: lightgray;
  vertical-align: middle;
    width: 100%;
    height: 30%;
    padding-top: 30%;
}

<input type="text">

Answer 1

由于您输入的内容为padding-top: 30%;，因此您只需说出padding: 15% 0;即可，因此您的文字将在<input>内动态居中。

＆＃13;

＆＃13;

input{
  background: lightgray;
  width: 100%;
  padding: 15% 0;
}

＆＃13;

<input type="text">

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要删除padding-top，默认情况下，输入中的文字将居中。

body, html {
  height: 100%;
}
input {
  background: lightgray;
  width: 100%;
  height: 30%;
}

<input type="text" placeholder="Text">