Inline-block and margin: auto not working for input

Question

I am new to CSS. I want my textbox (input) to be center aligned, also, I want to set a specific height to it. I want it to be responsive, so I am using % instead of px. It (%) seems to be working for width, but not for the height. For height, only px values are working. Also, I assigned my input's display property to be inline-block and margin 0 auto, but it is not working. Where am I going wrong??

Here's the code:

input {
    width: 70%;
    margin: 0 auto;
    display: inline-block;
    height: 20%;
}

Here's a code sample.

input {
    width: 70%;
    margin: 0 auto;
    display: inline-block;
    height: 20%;
}

<input type="text">

Answer 1

If you want to use % for height you will have to add some helper CSS first. Like the following:

html,body{
  height:100%;
}

and for making the <input> centre use

margin: 0 auto;
display: block;

A working sample for you:

input {
  width: 70%;
  margin: 0 auto;
  display: block;
  height: 20%;
}

html,
body {
  height: 100%;
}

<input type="text">

There is an easy another way if you are Interested you can go with vh[Viewport-height], for this method, there is no need to use any other helping CSS to use, so the choice is yours..

A working sample for this method:

input {
    width: 70%;
    margin: 0 auto;
    display: block;
    height: 20vh;
}

<input type="text">

Hope this was helpfull.

Answer 2

In CSS, some, if not most, properties of an element depends on its parent's properties.

So, to make height: 20% work, you need to set a height for the input's parent. In the example below, body is the parent of input.

To center-align an element using margin: 0 auto, the element must have display: block.

html, body {
  height: 100%;      /* Set a parent height */
}
input {
    width: 70%;
    margin: 0 auto;
    display: block;  /* Use display: block; */
    height: 20%;
}

<input type="text">

Answer 3

Set this style to input tag.

input {
    width: 70%;
    margin: 0 auto;
    display: block;
    height: 20vh;
}

<input type="text">

Answer 4

You need to give display:block for aligned center to input and display:inline-block is already apply here and give height to body,html for applying height to input

html,body{
  height:100%;
}
input {
    width: 70%;
    margin: 0 auto;
    display: block;
    height: 20%;
}

<input type="text">

Answer 5

If you will not work with flex then display:block; and width is important for centering elements.

div {
    width: 100%;
    display: block;
}

input{
  display:block;
  width: 70%;
  padding: 5px;
  font-size:18px;
  margin:0 auto;
}

<div>
  <input type="text">
</div>

Answer 6

Change fileURL to display: inline-block; and display: block; to height: 20%;

height: 20vh;

input {
    width: 70%;
    margin: 0 auto;
    display: block;
    height: 20vh;
}

UPDATE

Only change <input type="text"> to display: inline-block;

display: flex;

input {
    width: 70%;
    margin: 0 auto;
    display: flex;
    height: 20%;
}