html - Text align center or margin left and margin right not centering button in CSS

Question

I added a button to my HTML, and wanted to center it. I tried the two ways in the title but both of them did not work. Im new to HTML and CSS. I'm centering it using CSS but if there is a way to do it using HTML, i'm fine with that.

div {
  text-align: center;
}

body {
  text-align: center;
}

input[type=text] {
  width: 110%;
  padding: 1%;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
}

h1 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

div {
  height: 10em;
  position: relative
}

html {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

body {
  background: linear-gradient(-20deg, #e73c7e, #23a6d5, #23d5ab);
  background-size: 1000000% 1000000%;
}

button {
  margin-left: auto;
  margin-right: auto;
}

<div id="typing-area">
  <input type="text">
  <button>Enter</button>
  <h1>
    bocho is cool
  </h1>
</div>

question from:https://stackoverflow.com/questions/65851730/text-align-center-or-margin-left-and-margin-right-not-centering-button-in-css

Answer 1

Because you made the size of the input 110% and left the normal page size at 100%, it pushes out the input.

input[type=text] {
  width: 100%;
  padding: 1%;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;            
}

margin-left: auto;
margin-right: auto;

you can use this instead of above

margin:0 auto