Align text input vertically (dynamic height)

Question

I have created a dynamic height input as follow which scales when browser resize. The second step that I would like to achieve is to vertically center the input text. I use vertical-align: middle but it seems that nothing changes.

What could I do to vertically align the input text

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

<input type="text">

Answer 1

Since your input has a padding-top: 30%; you can just say padding: 15% 0; instead so your text will be dynamically centered within your <input>.

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

<input type="text">