How do I center my inputs in a div in HTML-CodePudding

I've been having an issue, my text box is at the very bottom of my div, I want it to be in the center, how can I fix this?

<input type="text" placeholder="search" id="search" name="search" required minlength="4" maxlength="90" size="75">

How it Looks

CodePudding user response：

Give your div a display flex property and use its aligning properties to align it according to your need.

display: flex;
justify-content: center;
align-items: center;

Reply to this if you still face any issues. I will be happy to help.

CodePudding user response：

You can do it like this:

.inputbox {
background-color:red;
padding:15px;
display:flex;
justify-content:center;
align-items:center;
}

#search {
  text-align:center;
  //if you want center text also
}

<div ><input type="text" placeholder="search" id="search" name="search" required minlength="4" maxlength="90" size="75"></div>