css - How do I position the search box to my specs? -

i've got search-form within div can't seem position wan't. using "top","bottom","left","right" commands aren't working. command "margin: 0 auto;" centers div on x plane not on y plane. know why happening & how can change it?

css

#box {     height: 60px;     width: 100%; } #postcode-search {     height: 60px;     width: 510px;     border: 3px solid yellow;     margin: 0 auto; }  input#item-search.form-control {     height: 50px;     width: 450px;     border: 1px solid #fd0e35;     padding: 0px;     top: 400px;     vertical-align: middle;     font-size: 14px;     text-align: center; 

html

<div id="box">     <div id="postcode-search">         <?php get_search_form();?>     </div> </div> 

you can flexbox

#postcode-search {    height: 60px;    width: 510px;    border: 3px solid yellow;    margin: 0 auto;    display: flex;    align-items: center;    justify-content: center;  }

<div id="box">    <div id="postcode-search">      search box    </div>  </div>