can not center input fields css

Question

Sorry I am new to this; trying to build the google webpage for practice . I can't figure out why my to "inputs" don't go to the center of page.

HTML:

#submitsearch {
  text-align:center;
}

#submitsearch [type="submit" ] {
  width: 120px;
  height: 30px;
  text-align: center; 
  background: #D3D3D3;
  border: 1px solid #fff;
  border-radius: 2px;
  color:#606060;
}

<div id="submitsearch">
   <input type="submit" value="Google Search">
   <input type="submit" value="I'm feeling lucky">
</div>

Answer 1

  <div id = "parent">
  <input type="submit" value="Google Search">
         <input type="submit" value="I'm feeling lucky">
      </div>

CSS

html,body,#parent{
  width:100%;
  height:100%;
}
#parent{
  display:flex;
  align-items:center;
  justify-content:center;
}

Working Example

Answer 2

https://codepen.io/Ylama/pen/BJjBeq

  <div>
     <input type="submit" value="Google Search">
     <input type="submit" value="I'm feeling lucky">
  </div>

CSS

 div {width: 100%;text-align: center;}

 input {margin: 0 auto;}

should do the trick.

Answer 3

Try following way:

  <div class="make-inputs-center">
      <input type="submit" value="Google Search">
     <input type="submit" value="I'm feeling lucky">
  </div>

And CSS:

.make-inputs-center {
  text-align:center;
}

Answer 4

There are two ways you can go about it.

You can make use of all.y and absolute positioning to the center of the page (This allows you to make no changes whatsoever to your parent container):

transform the submitsearch

#submitsearch {
  position:absolute;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  left:50%;
  top:50%;
}

#submitsearch [type="submit" ] {
  width: 120px;
  height: 30px;
  text-align: center; 
  background: #D3D3D3;
  border: 1px solid #fff;
  border-radius: 2px;
  color:#606060;
}

OR

Make your <div id="submitsearch"> <input type="submit" value="Google Search"> <input type="submit" value="I'm feeling lucky"> </div> as a flexbox and align and justify the contents in the center of the page by increasing its height to 100vh (or increase your body and submitsearch height to 100%):

submitsearch

#submitsearch {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

#submitsearch [type="submit" ] {
  width: 120px;
  height: 30px;
  text-align: center; 
  background: #D3D3D3;
  border: 1px solid #fff;
  border-radius: 2px;
  color:#606060;
}

Answer 5

Adding the following will do the trick for you

margin : 0 auto;