trying to align html button at the center of the my page

Question

I'm trying to align an HTML button exactly at the center of the page irrespective of the browser used. It is either floating to the left while still being at the vertical center or being somewhere on the page like at the top of the page etc..

I want it to be both vertically and horizontally centered. Here is what I have written right now:

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button> 

Answer 1

For example:

HTML

<div>
  <button>Submit</button>
</div>

CSS

button {
  margin:auto;
  display:block;
}